javascript - D3 : Draw merged lines as a single

Question

是否可以将两条线合并为一条并将其设置为单条动画？ 这是我的一个例子:

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可以打开没有错误)

如您所见，这些线条被合并为一条，并且变得动画化。但动画会在底部绘制一条线，然后在顶部绘制一条线。 是否有可能以某种方式将这些线组合成一条线并作为一条线进行动画处理？

Desired behavior: jsfiddle

(这只是一行，我希望两个人看到组合行的这种行为)

谢谢

Answer 1

这是可能的。我认为让您感到困惑的是，在 SVG 中，坐标系原点位于左上角，这意味着 y 向下增加。此图表应该有帮助:https://sarasoueidan.com/blog/svg-coordinate-systems/#initial-coordinate-system

这两条路径应该正确设置动画:

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

Here's a working jsfiddle .

此外，您正在向后移动您的路径。也就是说，您正在从下到上绘制路径，但动画却从上到下运行。我不确定这是有意还是无意。