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中的方法就足够了。

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

d3js图表动画无法正常运行

1 个答案: