d3js图表动画无效

Question

我正在将转换应用于我的图表。但我正在努力让他们产生任何结果。我试图按照.enter(),.update(),.exit()的模式。

我想完成的是让一系列数据消失。当人们点击图例（选择/取消选择）时，我希望发生这种情况，但现在为了方便起见，我将该功能附加到按钮上。选择按钮后，所有绿条都会出现，所有蓝条都会离开。

让我困惑的部分是这是一张配对的条形图。所以事情已经集合在一起，并增加了一层额外的复杂性。

d3.select("#change").on("click", updateBars); 
function updateBars() 
{ 

xScale.domain(d3.range(dataset.length)).rangeRoundBands([0, w], 0.05); 
yScale.domain([0, d3.max(dataset, function(d) { return (d.local > d.global) ? d.local : d.global;})]); 

var bars = svg.selectAll("sets") 
    .data(dataset); 

bars.enter() 
    .attr("x", w) 
    .attr("y", function(d){ 
     return h - yScale(d.global); 
    }) 
    .attr("width", xScale.rangeBand()) 
    .attr("height", function(d){ 
     return yScale(d.global); 
    }) 
    .attr("fill", colors[0][1]) 
    ; 

//Update 
bars.transition() 
    .duration(500) 
    .attr("x", function(d, i) { 
     return xScale(i); 
    }) 
    .attr("y", function(d) { 
     return h - yScale(d.global); 
    }) 
    .attr("width", xScale.rangeBand()) 
    .attr("height", function(d) { 
     return yScale(d.global); 
    }); 

//Exit 
bars.exit() 
    .transition() 
    .duration(500) 
    .attr("x", -xScale.rangeBand()) 
    .remove(); 
} 

我完整的代码，也可以seen here at my JSFiddle。

Answer 1

问题是，用你的方法，你不能按照预期使用输入/更新/退出选择。您正在使用数据创建条形集，但手动附加单条而不用数据项表示它们。

我已经更新了您的jsfiddle以提供某种形式的转换here，但要以适当的D3方式进行此项工作，您需要重构您的代码。这个想法是创建只使用数据，即一些酒吧两套像

d3.selectAll("rect.global").data(data) 
    .enter().append("rect") 
    .attr("class", "global") 
    ... 
d3.selectAll("rect.local").data(data) 
    .enter().append("rect") 
    .attr("class", "local") 
    ... 

然后你就可以使用相同的全选/数据结构以后进行个别条纹消失，移动等需要注意的是，如果所有你想要的是删除一个特定类型的栏（就像在你的jsfiddle中），你并不需要所有这些 - 像我在修改过的jsfiddle中的那种方法就足够了。

只有当您想要更新条形的值，为系列添加新的或删除系列的一部分时，您应该认真考虑重构您的代码，如上所述。