SVG如何使路径的一部分可拖动/可扩展

Question

使用D3我能够创建路径，路径仅包含网格上的水平和垂直线。我想选择线条的一部分(Visualisation)，如红色圆圈所示，其中 - 当鼠标向左移动时，线条应该跟随它（向左移动）。我不能只选择线的一部分，我想到的方法之一是创建只有水平和垂直线的多条路径，然后以某种方式拼接它们;我想知道是否有更好的方法;

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());
}