Javascript d3js图表动画不起作用

我正在将转换应用到图形中。但我正在努力让他们产生任何结果。我正在尝试遵循.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();
}

---

我的完整代码也可以是。

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

我已经更新了您的JSFIDLE以提供某种形式的转换，但是为了使其以正确的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构造在以后使单个条消失、移动等。请注意，如果您只想删除JSFIDLE中的一种特殊条，那么您并不真正需要所有这些—像我修改的JSFIDLE中的一种方法就足够了

---

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

拉尔斯再次解救。对我来说，你重组代码的建议似乎让人望而生畏。然而，我认为这会更有意义，与网上的例子更加一致。我认为这仍然允许我保持数据配对/分组？您的示例非常有效。但是为了重新添加这个系列，我需要重构我的代码，嗯？我的假设是，该系列现在已经从DOM中删除了。您不一定需要重构，您可以按照最初添加的方式重新添加它。是的，重新构造代码仍然可以让您对数据进行分组——或者是以我略带黑客的方式，或者是使用。