javascript - d3js : why doesn't first bar disappear using exit method?

Question

我正在创建一个简单的条形图并尝试让它响应用户的点击。单击的栏应该会消失。除了单击第一个栏会使末尾的栏消失外，一切似乎都正常。我完全不知道为什么会这样，非常感谢任何帮助。

Plunkr 上的完整代码:

https://plnkr.co/edit/H8K0ISdhGrb5HirrX2MG?p=preview

当用户点击栏时，我会调用更新函数。我创建了一个 removefromarray 函数来返回数据对象减去绑定(bind)到点击栏的数据。 :

d3.tsv("CantTouchThis.tsv",function(d,i){
d.FieldGoals = +d.FieldGoals;
return d; 

}, function(error,data){
 if (error) throw error;
y.domain([0,d3.max(data, function(d){return d.FieldGoals})]);
x.domain(data.map(function(d){return d.Player}));data used as the x attribute

function update(indx){

var selection = g.selectAll(".bars")
    .data(data.removefromarray(indx), function(d){console.log('d');console.log(d); return d}) //printing d shows the previous bars and new bars are being returned, I suspect this may be causing the problem, but not sure

selection.enter().append("rect")
    .attr("class","bars")
    .attr("width",function(d){return x.bandwidth()})
    .attr("x",function(d){return x(d.Player)})
    .attr("height",function(d){return height - y(d.FieldGoals)})
    .attr("y",function(d){return y(d.FieldGoals)})
    .on("click",function(d,i){update(i);});

console.log(selection.enter())

console.log(selection.exit())

selection.exit().remove()

}

Answer 1

解决方案 1:您缺少“更新”选项:

selection.attr("width",function(d){return x.bandwidth()})
    .attr("x",function(d){return x(d.Player)})
    .attr("height",function(d){return height - y(d.FieldGoals)})
    .attr("y",function(d){return y(d.FieldGoals)})
    .on("click",function(d,i){update(i);});

这是您更新的插件:https://plnkr.co/edit/qJY5KgY9FBvuJ8krddYm?p=preview

解决方案 2:另一个非常简单的解决方案(正确地解决了您的问题，“为什么第一个柱状图不使用退出方法消失？”):在数据绑定(bind)选择中使用正确的键:

var selection = g.selectAll(".bars")
    .data(data.removefromarray(indx), function(d){ return d.Player});
    //                    this is the proper key function ---^

但是，请记住，此“解决方案”不适用于所有点击。发生这种情况是因为您删除数据对象的方法(在扩展原型(prototype)中使用 splice)未正常工作。

这是另一个更新的插件:https://plnkr.co/edit/rVTinxx45nmBvFiWwqgg?p=preview

PS:有更简单的方法来做你想做的事(也更适合 D3 代码)。