learnD3Drag.js

var width = 600,
    height = 600;
// массив точек для создания пути

var data = [
    {x: 80, y: 100},{x: 120, y: 100},
    {x: 240, y: 200},{x: 280, y: 200}
];

var svg = d3.select("body").append("svg");
var svg2 = d3.select("body").append("svg");

svg.attr("height", height)
    .attr("width", width)
    .style('border','1px solid')

svg2.attr("height", height)
    .attr("width", width)
    .style('border','1px solid')
    .style('margin-left','10px')

// функция, создающая по массиву точек линии
var line = d3.line()
    .x( d => d.x )
    .y( d => d.y )
    .curve(d3.curveCatmullRom.alpha(1))


// добавляем путь
var path = svg.append("path")
    .attr("d", line(data))

var circle = svg.selectAll("circle")
    .data(data)
    .enter().append("circle")
    .attr("r", 3.5)
    .attr("cx", d => d.x )
    .attr("cy", d =>  d.y );

var lastCircle = svg.select("circle:last-of-type")
    .attr("r", 10)
    .style("stroke",'#000')
    .style("fill",'#fff')

var firstCircle = svg.select("circle:first-of-type")
    .attr("r", 10)
    .style("stroke",'#000')
    .style("fill",'#fff')

firstCircle.call(d3.drag()
    .on("start", started)
    )

lastCircle.call(d3.drag()
    .on("start", started)
    )


function started(){
  var x0 = d3.event.x
  var y0 = d3.event.y

  var pointIndex = data.findIndex((el) => el.x == x0 && el.y == y0)

  d3.event.on('drag', () => {
    var x1 = d3.event.x
    var y1 = d3.event.y
    console.log( pointIndex )
    if( pointIndex != -1 ){
      data[pointIndex] = {x:x1, y:y1}
      if( pointIndex == 3 )
        data[pointIndex - 1] = {x:x1 - 40, y:y1}
      else
        data[pointIndex + 1] = {x:x1 + 40, y:y1}
      path.attr('d', line(data))
      circle.data(data)
        .attr("cx", d => d.x )
        .attr("cy", d =>  d.y );
    }
  })
}