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 ミリ秒の遅延を加えて、一度に 1 つずつ各行を描画したいと考えています。私はうまくいくと思った以下のアプローチを試しましたが、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');

また、1 回の呼び出しですべてを実行できます。回線を作成した後に別の呼び出しを行う必要はありません。

于 2013-10-22T18:31:18.393 に答える