0

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

1 回答 1

1

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

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

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

于 2013-10-22T18:31:18.393 回答