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

我的完整代码也可以在我的JSFiddle上看到 。

Answer 1

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

我已经更新了您的jsfiddle，以在此处提供某种形式的过渡，但是为了以正确的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中那样的方法就足够了。

仅当您要更新条形图的值，为系列添加新的条形图或删除系列的一部分时，才应认真考虑重新构建上述代码。