d3js：为什么不先用退出方法消失吧？

我正在创建一个简单的条形图并试图使其响应用户点击。被点击的栏应该消失。所有似乎都在工作，除了点击第一个酒吧，最终酒吧消失。我完全不知道为什么会出现这种情况，非常感谢任何帮助。d3js：为什么不先用退出方法消失吧？

上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() 

}

来源

2016-12-28 st4rgut

你想要点击的栏被删除或不可见？ “消失”似乎非常大 – Dummy

解决方案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);});

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

解决方案2：另一种非常简单的解决方案（即正确地址你的问题，“为什么不用第一个bar消失使用退出方法？”）：在数据绑定选择中使用正确的键：

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

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

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

PS：有办法更简单的方法做你想做的（和更充足的D3代码也）。

来源

2016-12-29 00:08:51

谢谢！请纠正我，如果我错了，但我想澄清与我的代码的问题是，第一个栏存储在更新选择 - 这是不存在的 - 因此，不能被删除 – st4rgut

它更多一点复杂。当我们使用更新选择时，我们保证所有的小节将被正确地重新定位。但忘记这一点，试着关注第二种解决方案：当我们正确地将数据与元素相关联时，我们可以操纵数据知道“什么”元素将要改变。但是，正如我所说的，您的方法根据点击更改数据存在问题。 –

d3js：为什么不先用退出方法消失吧？

回答

相关问题