javascript – 不能讓路徑慢慢地與D3生長

使用d3圖形庫,我似乎無法使路徑慢慢地繪製,以便可以看到它們的增長.

ofollow,noindex" target="_blank">This site 在“線圖(展開)”部分有一個完美的例子,但沒有為該部分提供程式碼.有人可以幫助我的D3程式碼,可能會發生這樣的事情嗎？

當我嘗試在下面的程式碼片段中新增delay()或duration()時,路徑仍然立即繪製,並且此段之後的所有SVG程式碼無法呈現.

var mpath = svg.append ('path');
mpath.attr ('d', 'M35 48 L22 48 L22 35 L22 22 L35 22 L35 35 L48 35 L48 48')
.attr ('fill', 'none')
.attr ('stroke', 'blue')
.duration (1000);

這假設你有一個生成器稱為線路設定與d3.svg.line計算路徑：

// add element and transition in
var path = svg.append('path')
.attr('class', 'line')
.attr('d', line(data[0]))
.transition()
.duration(1000)
.attrTween('d', pathTween);

function pathTween() {
var interpolate = d3.scale.quantile()
.domain([0,1])
.range(d3.range(1, data.length + 1));
return function(t) {
return line(data.slice(0, interpolate(t)));
};
}​

這裡的pathTween函式返回一個內插器,它接受一個給定的行的切片,由我們通過轉換的距離來定義,並相應地更新路徑.

值得注意的是,我懷疑通過簡單的路線可以獲得更好的效能和更流暢的動畫：放置一個白色矩形(如果你的背景很簡單)或clipPath(如果你的背景很複雜)並將其過渡到右側,顯示下方的線.