是否可以將兩條線合併爲一條線並將其製作爲單個線? 這裏有一個例子我有什麼:D3:將合併的線條繪製爲單個線條
const line1 = 'M0,100V100H0V0';
const line2 = 'M-200,200V200H0V100';
const path = d3.select('#line')
.attr('d', line1 + line2);
const pathLength = path.node().getTotalLength();
function _interpolateDashOffset() {;
const interpolate = d3.interpolateNumber(pathLength, pathLength * 2);
return() => time => interpolate(time);
}
d3.select('#line')
.attr('fill', 'none')
.attr('stroke', 'black')
.attr('stroke-width', 8)
.attr('stroke-dasharray', `${pathLength} ${pathLength}`)
.transition()
.ease(d3.easeLinear)
.duration(2000)
.attrTween('stroke-dashoffset', _interpolateDashOffset())
.on('end',() => {
console.log('path animation ended');
});
(它使用ES6,只有FF和Chrome可以打開W/O錯誤)正如你看到的合併成一個線條
而不是動畫。但動畫在底部繪製一條線,然後在頂部繪製一條線。 是否有可能以某種方式將這些行合併爲一行並將其作爲單行進行生成?
(它只是一條線,我想要兩個看到這樣的行爲與組合線)
感謝
你的文章是真棒,我已經爲自己發現了許多新的,感謝的話。另外,在理解'Path Mini-Language'之後,我可以合併行https://www.dashingd3js.com/svg-paths-and-d3js –
下面是兩個鏈接,可以幫助您瞭解SVG的路徑:[使用行創建路徑命令](http://vanseodesign.com/web-design/svg-paths-line-commands/)和[用曲線命令創建路徑](http://vanseodesign.com/web-design/svg-paths-curve - 命令/) – Ashitaka