Question

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

关于Plunkr的完整代码：

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

当用户点击栏时，我会调用更新功能。我创建了一个removefromarray函数来返回数据对象减去绑定到单击条的数据。：

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：您错过了＆＃34;更新＆＃34;选择：

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);});

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

解决方案2：另一个非常简单的解决方案（正确解决了您的问题，＆＃34;为什么第一个栏不会使用退出方法消失？＆＃34; ）：使用正确的数据绑定选择中的关键：

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

然而，请记住这个＆＃34;解决方案＆＃34;不适用于所有点击。发生这种情况的原因是您删除数据对象的方法（使用扩展原型中的拼接）不正常工作。

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

PS：有更简单的方法可以做你想要的（也更适合D3代码）。

d3js：为什么第一个bar没有使用exit方法消失？

1 个答案: