Question

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

Answer 1

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

的内容

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

您也可以在一次通话中完成所有操作，创建线后无需单独使用。

d3为多个SVG线设置动画

1 个答案: