SVG So machen Sie einen Teil des Pfades ziehbar/erweiterbar

Question

Mit D3 kann ich einen Pfad erstellen, der Pfad enthält nur horizontale und vertikale Linie in einem Raster. Ich möchte einen Teil der Linie auswählen, (Visualisation) wie durch den roten Kreis gezeigt, wo - wenn der Mauswiderstand nach links auftritt, sollte die Linie ihr folgen (indem sie nach links geht). Ich bin nicht in der Lage, nur einen Teil der Linie auszuwählen. Einer der Ansätze, an den ich gedacht habe, war, mehrere Pfade nur mit horizontalen und vertikalen Linien zu erstellen und sie dann irgendwie zu nähen; Ich würde gerne wissen, ob es einen besseren Ansatz gibt;

Answer 1

Verwenden Sie d3 path, um die Pfaddaten während des Ziehereignisses zu erstellen.

Dies ist nur eine grundlegende Code-Idee, Sie müssen es auf Ihre Bedürfnisse ausstatten.

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