SVGパスの一部をドラッグ可能/拡張可能にする方法

Question

D3を使用するパスを作成することができます。パスには、グリッド上に水平線と垂直線のみが含まれています。私は(Visualisation)という行の一部を赤い円で選択したいと思っています。ここで、マウスのドラッグが左に起こると、行がそれに従うべきです（左に行く）。私はラインの一部だけを選択することができません。私が考えたアプローチの1つは、水平と垂直ラインの複数のパスを作成し、それらを何とかステッチすることでした。より良いアプローチがあるかどうかを知りたい。

Answer 1

d3 pathを使用して、ドラッグイベント中にパスデータを構築します。

これは基本的なコードの考え方にすぎません。あなたのニーズに応えなければなりません。

var path = d3.select('path'); 

path.call(d3.drag() 
    .filter(() => d3.event.x > 0 && d3.event.x < 20) 
    .on('drag', move) 
); 

function move() { 
    var d = d3.path() 
     .moveTo(0, 0) 
     .lineTo(d3.event.x, 0) 
     .lineTo(d3.event.x, 10) 
     .lineTo(20, 10); 
    path.attr('d', d.toString()); 
}