D3：マージされた線を1つだけ描画する

Question

2本の線を1つにマージして1つにアニメーション化できますか？ここ は、私が持っているものの例である：

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とクロムは、W/Oエラーを開くことができます）

あなたがラインを一つに合わせ、見ての通りアニメ化されたものより。しかし、アニメーションは一番下に線を描き、一番上に線を描きます。 どういうわけかこれらの線を1つに結合し、1つの線でアニメーション化できますか？

Desired behavior: jsfiddle

（それだけで1行だと私は2つを組み合わせたラインと、このような動作を確認したい）

おかげ

Answer 1

可能な解決策の一つが適切に行マージすることです。例えば を、私たちは、私は下から上へのパスを描画しています私の場合は

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

Answer 2

ことが可能です。 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。

また、パスを後ろにアニメートしています。つまり、パスを下から上に描画していますが、アニメーションは上から下に向かって実行されています。これが意図されているかどうかはわかりません。