D3：將合併的線條繪製爲單個線條

是否可以將兩條線合併爲一條線並將其製作爲單個線？這裏有一個例子我有什麼：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'); 
});

Demo: jsfiddle

（它使用ES6，只有FF和Chrome可以打開W/O錯誤）正如你看到的合併成一個線條

而不是動畫。但動畫在底部繪製一條線，然後在頂部繪製一條線。是否有可能以某種方式將這些行合併爲一行並將其作爲單行進行生成？

Desired behavior: jsfiddle

（它只是一條線，我想要兩個看到這樣的行爲與組合線）

感謝

來源

2016-09-29 Vladyslav Babenko

其中一個可能的解決方案是，可以正確合併線：例如，我們有

const line1 = 'M0,100V100H0V0'; 
const line2 = 'M200,200V200H0V100'; 
const line3 = 'M200,300V300H200V200'

在我的情況下，我畫從底部到頂部的路徑。我正在走上一條路，我需要知道line3的最終座標，並且要合併沒有M（moveto）的線：line3 + line2 (without 'M') + line1 (without 'M')。至於結果，我有：

const mergedLine = 'M200,300V300H200V200 V200H0V100 V100H0V0';

Final solution: jsfiddle

來源

2016-09-30 11:29:55

這是可能的。我認爲令人困惑的是，在SVG中，座標系原點位於左上角，這意味着y向下增加。此圖應是有用的：https://sarasoueidan.com/blog/svg-coordinate-systems/#initial-coordinate-system

這些2條路徑應正確動畫：

const line1 = 'M0,300V-100'; 
const line2 = 'M0,-200V-200';

Here's a working jsfiddle。

此外，您正在向後動畫您的路徑。也就是說，您正在繪製從下到上的路徑，但隨後動畫從上到下運行。我不確定這是否是有意的。

來源

2016-09-29 22:20:16 Ashitaka

你的文章是真棒，我已經爲自己發現了許多新的，感謝的話。另外，在理解'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

D3：將合併的線條繪製爲單個線條

回答

相關問題