Animation 带数据连接的动画d3

我正在尝试设置数据联接的动画。我可以改变和更新状态，但是状态之间没有任何无缝的动画

我试着引用这个来回答我的问题：

这个数据是在json加载时创建的…然后，点击一个按钮，我只是简单地将20（用于测试目的）添加到我的y值中…它会更新，但没有转换。我选错了什么

变量栏已全局定义

function btnClick(){
        //bar.exit().remove();

            bar = chart.selectAll("g")

            .data(mydata.players)
            console.log(bar.data(mydata.players))
            bar.exit().remove()


            bar.enter().append("g")
            .transition()
            .duration(1650)
            .attr("transform", function (d) {
                return "translate(" + x(d.name) + ",0)";
            });

        bar.append("rect")

            .attr('width', x.rangeBand())
            .attr("y", function (d) {
                return y(d.money+20)
            })
            .attr("height", function (d) {
                return height - y(d.money+20);
            })

尝试在高度更改之前移动过渡：

     chart.selectAll("g")
.data(mydata.players);
 bar.exit().remove();

bar.attr("transform",
function(d) {
    return "translate(" + x(d.name) + ",0)";
});

bar.append("rect")
.attr('width', x.rangeBand())
.transition()
.attr("y", function(d) {
    return y(d.money + 20)
})
.attr("height", function(d) {
    return height - y(d.money + 20);
})

---

我想我只是没有在btnClick（）中为bar选择正确的选项。也许我不应该抓住所有的“g”元素？这个条是在json加载之前定义的，所以我不确定我是否应该通过选择所有的g元素来再次定义它……如果它已经构建好的话。我已经存储了它，应该能够对它进行操作：但是如果我没有定义它，那么出于某种原因，exit.remove（）无法工作。

好的，我对代码做了一些必要的小修改，以使其工作。因此，有两件事需要注意：

要选择要更新的矩形：

bar.select("rect")
    .attr('width', x.rangeBand())
    .transition().duration(750).ease("linear")
    .attr("y", function (d) {
        return y(d.money + 20)
    })
    .attr("height", function (d) {
        return height - y(d.money + 20);
    })

您希望重新设置y域以适应新的数据值（您实际上没有新的数据集，您只需添加20…因此，在这里也可以这样做）：

注意：您的最高条不会移动，因为其值将其置于新旧比例的顶部（域基于数据值）。要看到所有条线上升，您可以膨胀原始数据的域（例如+20）。我放了一个评论，你可以这样做

---

这是完整的。

您正在对输入选择进行转换…您只需在更改高度之前将其移动到更新选择即可。此外，更新不需要输入选择。只需再次选择元素并更改属性。这不太管用。我想这是因为我在追加新的rect而不是使用当前的rect？是的，不要追加新的rect…只需执行

bar.attr即可（…

。如果您仍然存在问题，请创建一个提琴，以便于调查。是的。我尝试过这一点……不幸的是，如果我删除该行，条形图高度甚至没有任何变化。单击时没有更新。出于某些原因，它需要新的矩形。我在此处添加了一个JSFIDLE链接：

y.domain([0, d3.max(mydata.players, function (d) {
    return d.money + 20;
})])