Javascript 带有exit（）和enter（）的d3.js子转换

简短问题：如何访问

this.selection.exit（）

子转换中的整个

this.selection

我正在尝试制作一个d3.js转换序列。我知道如何使用

transition.transition（）

函数创建序列，但这是我的问题

顺序应该是：[删除

.exit（）

节点]→ [移动节点]→ [添加

.enter（）

节点]

代码是：

        this.selection.exit().remove();
        this.selection
            .style("left", this.styleLeft)
            .style("top", this.styleTop)
            .style("width", this.styleWidth)
            .style("height", this.styleHeight);
        this.selection.enter().append("div")
            .attr("class", "node")
            .style("left", this.styleLeft)
            .style("top", this.styleTop)
            .style("width", this.styleWidth)
            .style("height", this.styleHeight);

如果我将

transition（）

添加到上面的每个命令中，所有转换都将同时启动

.delay（）

似乎无法同时在多个转换上正常工作

因此，我希望将子转换与

.transition（）

一起使用，但如果我将第二个命令应用于第一个命令，则只有

.exit（）

选择

编辑1：

例如，它如何不起作用：

        this.selection.exit().transition()
        .duration(1000).style("opacity", 0).remove();

        this.selection.transition().delay(1010)
            .duration(1000)
            .style("left", this.styleLeft)
            .style("top", this.styleTop)
            .style("width", this.styleWidth)
            .style("height", this.styleHeight)

        this.selection.enter().append("div")
            .attr("class", "node")
            .style("opacity", 0)
            .style("left", this.styleLeft)
            .style("top", this.styleTop)
            .style("width", this.styleWidth)
            .style("height", this.styleHeight)
            .transition()
            .delay(2020)
            .duration(1000)
            .style("opacity", 1);

此处错误：上一个转换未启动，因此所有新节点都是不透明的。但是如果我禁用第二个转换，它就会工作

编辑2：

如果在转换期间再次调用该函数，则会出现问题

---

此外，延迟应与动画一样长。如果没有动画，则延迟应为0。这就是我想使用结束事件的原因。

您可以使用

d3.transition（）。each（）

按照Mike Bostock的方法在预先存在的选择上链接转换，但是，在我的测试中，它没有跳过不需要的转换，所以我添加了条件来跳过空选择的转换：

---

使用

.delay（）

应该在这里起作用——你能举个例子说明它不起作用的地方吗？谢谢，但你能把这作为一个可复制的例子吗？我想运行它看看会发生什么。好的，如果在转换过程中再次调用该函数，就会出现问题。是的，安排新的转换会取消任何正在运行的转换。

var transition=d3.transition().duration(2000);

if (!selection.exit().empty()) transition=transition.each(function(){
    selection.exit()
        .transition()
        .style("opacity", 0)
        .remove();
}).transition();

if (!selection.empty()) transition=transition.each(function(){
    selection.transition()
    .style("height", function (d) {
        return (d.value * 10) + "px";
    });
}).transition();

transition.each(function(){
    selection.enter()
        .append("div")
        .attr("class", "bar")
        .attr("id", function (d) {
            return d;
        })
        .style("opacity", 0)
        .style("height", function (d) {
            return (d.value * 9) + "px";
        })
        .text(function (d) {
            return d.id
        })
        .transition()
        .style("opacity", 1)
        .style("height", function (d) {
            return (d * 10) + "px";
        });
});