Q:

SVG How to make a part of the path draggable/ expandable

Using D3 I'm able to create a path, the path contains only horizontal and vertical line on a grid. I would like to select a part of the line,(Visualisation) as shown by the red circle, where - when the mouse drag occurs towards left, the line should follow it( by going towards the left). I'm not able to select only a part of the line, One of the approach I thought of was to create multiple paths of only either horizontal and vertical lines and then stitching them somehow; I would like to know if there is a better approach; 

A:

Use d3 path to construct the path data during the drag event.
This is only a basic code idea, you'll have to flesh it out to your needs.
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());
}

