Javascript 动画排序堆叠条形图d3.js

我想从中使用参数设置一种堆叠条形图的动画，如

我很成功地对x轴进行排序，但没有成功地移动堆叠的条

这是我的密码：

HTML

排序值

可以这样做。为持有完整堆栈的g组赋予一个类：

//Now each g which holds a stack has a class for selection.
var state = svg.selectAll(".state").data(data).enter().append("g").attr("class", "g").attr("transform", function (d) {
    return "translate(" + x(d.State) + ",0)";
}).attr("id", function (d) {

    return d.State;
}).attr("class", "stack");

然后在更改select do转换时触发的更改代码中，如下所示：

//translate the stack post sorting.
    transition.selectAll(".stack")
        .delay(delay)
        .attr("transform", function (d) {

        return "translate(" + x0(d.State) + ",0)";
    });

我在代码中添加了注释，以便您理解演示

---

全功能小提琴。

根据我的回答，我做了一个例子来说明我的问题。非常感谢，它工作得非常好。我更新了我的系统以适应我的结构。我还必须在我的更改函数中添加x0.domain（…）函数。