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：将合并的线条绘制为单个线条

回答

相关问题