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")
  ...

然后您可以使用相同的 selectAll/data 构造稍后使单个条消失、移动等。请注意，如果您只想删除一种特定类型的条（例如在您的 jsfiddle 中），那么您实际上并没有需要所有这些——像我修改过的 jsfiddle 中的方法就足够了。

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