d3 为多条SVG线添加动画效果

d3 Animate Multiple SVG Lines

本文关键字：添加 动画 SVG d3      更新时间：2023-09-26

我正在尝试一次在折线图上创建多条线。我以以下格式创建了一个大约 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');

您也可以在一次调用中完成所有操作，无需在创建线路后进行单独的调用。

相关文章：