单击以删除条形图的条

Question

I have made a bar graph in d3.js. I want a behavior where on clicking on any of the bars, that bar gets deleted.

I have a function which, given the index, deletes the array element and also updates the DOM.

First click works fine, but on later clicks, I am getting different index values and some other bar is getting deleted. Any idea why the index value is not coming properly on click ?

 <script>         

var dataSet = [ 
                    {key:0, value: 10},
                    {key:1, value: 18},
                    {key:2, value: 13},
                    {key:3, value: 19},
                    {key:4, value: 21},
                    {key:5, value: 25}                        
            ];

var canvasWidth = 500, canvasHeight = 500;

var svg = d3.select('body').append('svg').attr('width',canvasWidth).attr('height',canvasHeight);

svg.append('rect').attr('width', "100%").attr('height', '100%').attr('fill', 'lightgrey').classed('bg',true);    

// Bargraph

var 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(data){return data.value}), canvasHeight-padding])

// Create

var key = function(d) { return d.key; };

var barGraph = svg.selectAll('rect.bars').data(dataSet,key).enter().append('rect')
    .attr('x', function(data,index){return (padding+barWidth)*index})   
    .attr('y', function(data){ return canvasHeight-barScale(data.value); })        
    .attr('width', barWidth)
    .attr('height', function(data){ return barScale(data.value); })        
    .style('fill', 'teal')
    .classed('bars',true) 

    // ---------- Here is the problem --------------------

    .on('click',function(data,index){ console.log(index) ; removeElement(index) })
    .on('mouseover',function(data){ })

// Exit some

function removeElement(index) 
{
    dataSet.splice( index , 1)        
    var updated = svg.selectAll('rect.bars').data(dataSet,key)

    updated.exit()
    .transition()
    .duration(1000)
    .attr('width', 0) 
    .remove()
    .each('end',function()
    {
        svg.selectAll('rect.bars')
        .transition()
        .duration(1000)
        .attr('x', function(data,index){return (padding+barWidth)*index})   
    })
}

</script> 

Answer 1

Probably because when you rebind the data ( var updated = ... ) the removed bar is still part of the selection, which affects the index.

I think the best solution would be to look up index within dataSet , using dataSet.indexOf(data) , instead of relying on the index that's passed into the click handler.

Alternatively, you can try to see if any of the following works, if you add it within the .each('end',...) handler:

1. rebind the data yet again
2. call .order() on the bars, as in svg.selectAll('rect.bars').order()
3. resubscribe to the click event, as in svg.selectAll('rect.bars').on('click',...)

Answer 2

I think it's combination of relying on the index and the in-place array splice that's throwing d3 data-binding off.

Try:

dataSet = dataSet.filter(function(d,i){
  return d.key != index;
});      
var updated = svg.selectAll('rect.bars').data(dataSet,key)

Example here .

EDITS

Let me clarify, it's not the in-placeness of the splice that throwing this off, it's the reliance of shifting by index. Regardless of removing the elements, the click handler still believes the data to be it's old index. You can witness this in your console.log(index) . This is why my code above works. You are no longer relying on removing by index, but by d.key which is the starting index (that same index the click is remembering).

An alternate way to fix this that does work with splice is to re-bind your event handler on data update.

function removeElement(index) 
{
    dataSet.splice(index, 1);
    var updated = svg.selectAll('rect.bars')
      .data(dataSet,key)
      .on('click',function(data,index){ console.log(index) ; removeElement(index) });

updated.exit()....

See this example .