Javascript d3为多个SVG行设置动画

我试图在一个折线图上创建多条线，一次创建一条。我创建了一个大约100行的对象数组，格式如下：

var allLines = [{type: "linear", values: [1000, 2000, 3000]}, {}, ... {}];

var line = d3.svg.line()
    .defined(function (d) {
        return d != null;
    })
    .x(function (d, i) {
        return x(new Date(minYear + i, 1, 1));
    })
    .y(function (d) {
        return y(d);
    });

现在我想画每条线，一次画一条，每条线之间有250毫秒的延迟。我已经尝试了下面的方法，我认为这是可行的，但我肯定错过了一些东西，因为它只是等待250毫秒，然后画出所有的线

svg.append('g')
    .attr('class', 'lineGroup')
    .selectAll('path')
    .data(allLines)
    .enter()
    .append('path')
    .attr('class', function (d) {
        return d.type;
    })
    .style('visibility', 'hidden')
    .attr('d', function (d) {
        return line(d.values);
    });

    function foo(transition) {
        transition
            .style('visibility', 'visible');
    }

    d3.select('.lineGroup').selectAll('path').transition().delay(250).call(foo);

---

您的基本方法是正确的，您只需要动态调整延迟，以便稍后绘制后续线条。目前，延迟适用于所有线路。要使其动态化，可以使用

svg.append("g")
   // etc
   .transition()
   .delay(function(d, i) { return i * 250; })
   .style('visibility', 'visible');

---

您也可以在一次呼叫中完成所有操作，在创建线路后无需单独呼叫。

我知道这是我遗漏的一件简单的事情。谢谢你的回答。现在我有了第二个转换，在一个单独的延迟上改变不透明度。是否可以在将样式从隐藏更改为可见的延迟时间内更改“d3.select（'.title1'）.text（d.type）；”等元素的文本？我尝试在.style（…）行之后添加.call（updateText）之类的内容，但它只是用所有内容更新文本。您可以根据需要更新/设置任意多个属性的动画（尽管在任何情况下都没有意义）。一般规则是在调用

.transition（）

之前指定开始状态，然后指定结束状态。例如：.style（'visibility'，function（d）{d3.select（'.title1'）。text（''）；return'hidden'；}），然后是.style（'visibility'，function（d）{d3.select（'.title1'）.text（'Best Forecast:'+d.type）；在.transition（）之后返回'visible'；}）是的，尽管在返回属性值的函数中产生副作用不是特别好的做法。

svg.append('g')
    .attr('class', 'lineGroup')
    .selectAll('path')
    .data(allLines)
    .enter()
    .append('path')
    .attr('class', function (d) {
        return d.type;
    })
    .style('visibility', 'hidden')
    .attr('d', function (d) {
        return line(d.values);
    });

    function foo(transition) {
        transition
            .style('visibility', 'visible');
    }

    d3.select('.lineGroup').selectAll('path').transition().delay(250).call(foo);