我正在嘗試在 D3 中制作可重復使用的圖表。該圖使用繪制一條線.curve(d3.curveStepAfter)，我正在嘗試使用帶有補間函式的 stroke-dasharray 屬性為線條設定影片。以下代碼是我初始化可視化的方式：
selection
.append('g')
.selectAll('path.line')
.data(grouped_data)
.join(
(enter) => enter
.append('path')
.attr('class', 'step_line')
.call(initializeLine)
.call(lineTransition),
(update) => update,
(exit) => exit.remove());
const initilizeLine = (enter) => {
enter
.attr('d', (d) => drawCurve(d[1]))
.attr('stroke', d => {
return color(d[0]);
})
.attr('fill', 'none');
}
const lineTween = () => {
let l = this.getTotalLength(),
i = d3.interpolateString('0,' l, l ',' l);
return function(t) { return i(t) };
}
const lineTransition = (enter) => {
enter
.transition()
.duration(2500)
.attrTween('stroke-dasharray', lineTween);
}
線條在 svg 中正確繪制，但過渡不起作用。當我查看控制臺時，我看到錯誤 this.getTotalLength is not a function。這是因為正在傳遞輸入物件。我需要能夠將路徑傳遞給 lineTween 函式，但我摸不著頭腦。
uj5u.com熱心網友回復：
在您的箭頭函式的背景關系中this是window. 因此，要么使用常規函式，要么使用第三個和第二個引陣列合來獲取您想要的元素：
const lineTween = (_, j, n) => {
let l = n[j].getTotalLength(),
i = d3.interpolateString('0,' l, l ',' l);
return function(t) { return i(t) };
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/504318.html
標籤：javascript d3.js
下一篇：在JS中合并不相交的物件陣列