折れ線グラフに複数の線を一度に作成しようとしています。以下の形式で約 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);