javascript - Removing bar graph's bars, on click -

I d3.js. Once in the graph is created. I would like to have a behavior where the bar is removed when clicked at any time.

I have a function that is given to the index, removes the array element and also updates the DOM.

The first click works fine, but later on click, I am getting various index values ​​and some other times are being removed. Any idea why the index value is not coming right on click?

  & lt; Script & gt; {Key: 3, value: 19}, {key: 4, value} {var: 0, value: 10}, {key: 1, value: 18}, {key: 2, value: 13}: 21} , {Key: 5, value: 25}]; Var Canvas Weedth = 500, CanvasHight = 500; Var svg = d3.select ('body'). Annex ('SVG'). Atr ('width', canvasvith) .attr ('height', canvasHeight); At ('height', '100%') etter ('fill', 'light gray'). Classified ('bg', 'b' true); // bar graph bar barwidth = 20, padding = 1; Var barScale = d3.scale.linear () .domain ([d3.min (dataset, function (data) {return data.value}), d3.max (dataset, function (data) {return data.value}}] ) .Range ([d3.min (dataset, function) {return data.value}), canvas light-padding) // var key = function (d) {return d.key;}; var bar graph = Svg.selectAll ('rect.bars') .data (dataset, key) .endre () .appand ('rect') .attr ('x', function (data, index) {return (padding + barwidth) * indicator ()) .attr ('y', function) {return canvas short-bar scalel (data.value);}) .attr ('width', barWidth) .attr ('height', function (Data) {Return barScale (data.value);}) Style ('Filling', 'Till'). Categorized ('times', true) // ---------- Problems - - ---------------- .on ('click', function (data, index) {console.log (index); remove (index)}). ('Mouseover ', Function (data) {}) // Remove a function element (index) {dataSet.splice (index, 1) var updated = svg.selectAll (' rect.bars'). Data (dataset, key) updated. Exit (). Transition (). Directory (1000) .attr ('width', 0) .remove () .each ('end', function) (svg.selectAll ('rect.bars'). Transition () .duration (1000) .attr ('x', function (data, index) {return (padding + bar width) * index}}}}}    d3 < / Code> Throw off data binding. 
 
 Try: 
 
  dataSet = dataSet.filter (function (D, I) {return d.key! = Index;} ); For example  
  EDITS  P> 
 Let me explain, it is not under the guise of Bengaluru To throw it, it is the relocation of the transfer by the index. Despite the removal of the elements, the click handler still believes that this data is the old index in your  console.log (index)  This is the reason that my code works above you are no longer dependent on deletion by index but initial index by  d.key  (that index is to remember the click ). 
 
 To fix this An alternate method for which Bantu works with is tieing its event handler to data updates. 
 
  Remove the function element (index) {dataSet.splice (index, 1); Var updated = svg.selectAll ('rect.bars'). Data (dataset, key) ('Click', function (data, index) {console.log (index); remove (index)}); Updated.exit () ....  
 
 See it.