update line when dragging point in grouped multiline chart

I'm attempting my first foray into D3.js - the aim is a grouped multiline chart with draggable points, in which dragging a point results in the connecting line being updated too. Eventually, the updated data should be passed back to r (via r2d3() ). So far I managed to get the base plot and to make the points draggable... but when it comes to updating the line (and passing back the data?) I have been hitting a wall for hours now. Hoping someone might help me out?

I'm pasting the full script because I don't trust myself to not have done something truly unexpected anywhere. The code to do with dragging is all positioned at the bottom. In it's current form, dragging a circle makes the first of the lines (the lightblue one) disappear - regardless of which of the circles is dragged. On draggend the lines are drawn again with the default (smaller) stroke, which is of course not how it should work in the end. Ideally the line moves with the drag movement, althoug I'd also be happy if an updated line was drawn back again only after the drag ended.

I think that what I need to know is how to get the identifying info from the dragged circle, use it to update the corresponding variable in data (data is in wide format, btw), and update the corresponding path.

bonus question: drag doesn't work when making x scaleOrdinal (as intended). Is there a workaround for this?

// !preview r2d3 data= data.frame(id = c(1,1,2,2,3,3,4,4,5,5), tt = c(1, 2, 1, 2, 1, 2, 1, 2, 1, 2), val = c(14.4, 19.3, 22.0, 27.0, 20.7, 25.74, 16.9, 21.9, 18.6, 23.6))

var dById = d3.nest()
  .key(function(d) {
    return d.id;
  })
  .entries(data);

var margin = {
    top: 40,
    right: 40,
    bottom: 40,
    left: 40
  },
  width = 450 - margin.left - margin.right,
  height = 300 - margin.top - margin.bottom;

var color = d3.scaleOrdinal()
  .range(["#a6cee3", "#1f78b4", "#b2df8a", "#33a02c", "#fb9a99"]);

var x = d3.scaleLinear()
  .range([0.25 * width, 0.75 * width])
  .domain([1, 2]);

var y = d3.scaleLinear()
  .rangeRound([height, 0])
  .domain([0, d3.max(data, function(d) {
    return d.val * 1.1;
  })]);

var xAxis = d3.axisBottom(x),
  yAxis = d3.axisLeft(y);

// Define the line by data variables
var connectLine = d3.line()
  .x(function(d) {
    return x(d.tt);
  })
  .y(function(d) {
    return y(d.val);
  });


svg.append('rect')
  .attr('class', 'zoom')
  .attr('cursor', 'move')
  .attr('fill', 'none')
  .attr('pointer-events', 'all')
  .attr('width', width)
  .attr('height', height)
  .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');

var focus = svg.append("g")
  .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

focus.selectAll('lines')
  .data(dById)
  .enter().append("path")
  .attr("class", "line")
  .attr("d", function(d) {
    return connectLine(d.values);
  })
  .attr("stroke", function(d) {
    return color(d.key);
  })
  .attr('stroke-width', 4);

focus.selectAll('circles')
  .data(dById)
  .enter().append("g")
  .attr("class", "dots")
  .selectAll("circle")
  .data(function(d) {
    return d.values;
  })
  .enter().append("circle")
  .attr("cx", function(d) {
    return x(d.tt);
  })
  .attr("cy", function(d) {
    return y(d.val);
  })
  .attr("r", 6)
  .style('cursor', 'pointer')
  .attr("fill", function(d) {
    return color(d.id);
  })
  .attr("stroke", function(d) {
    return color(d.id);
  });

focus.append('g')
  .attr('class', 'axis axis--x')
  .attr('transform', 'translate(0,' + height + ')')
  .call(xAxis);

focus.append('g')
  .attr('class', 'axis axis--y')
  .call(yAxis);


/// drag stuff: 

let drag = d3.drag()
  .on('start', dragstarted)
  .on('drag', dragged)
  .on('end', dragended);

focus.selectAll('circle')
  .call(drag);

// focus.selectAll('line')
//    .call(drag);

function dragstarted(d) {
  d3.select(this).raise().classed('active', true);
  dragID = Math.round(x.invert(d3.event.x)); 
// get x at start in order to force the dragged circle to    stay at this x-value (i.e. allow it to vertically only)
}

function dragged(d) {
  dragNewY = y.invert(d3.event.y);
  d3.select(this)
    .attr('cx', x(dragID))
    .attr('cy', y(dragNewY));

  //  focus.selectAll('path')
  //      .attr("d", function(d) { return connectLine(d); }); // removes all lines (to be redrawn at dragended with a smaller stroke)

  focus.select('path').attr("d", function(d) {
    return connectLine(d);
  }); // removes first lines (to be redrawn at dragended with a smaller stroke)

  // How do I select only the line associated with the dragged circle?
}

function dragended(d) {
  d3.select(this).classed('active', false);

  focus.selectAll('lines')
    .data(dById)
    .enter().append("path")
    .attr("class", "line")
    .attr("d", function(d) {
      return connectLine(d.values);
    })
    .attr("stroke", function(d) {
      return color(d.key);
    });
    }

Solution

Update the data point associated with the circle and then update the circle and all the lines.

Do not add new lines in the dragend()

function dragged(d) {
  dragNewY = y.invert(d3.event.y);
  d.val = dragNewY;
  d3.select(this)
    .attr('cx', d => x(d.tt))
    .attr('cy', d => y(d.val));

  //  focus.selectAll('path')
  //      .attr("d", function(d) { return connectLine(d); }); // removes all lines (to be redrawn at dragended with a smaller stroke)

  focus.selectAll('path').attr("d", function(d) {
    return connectLine(d.values);
  }); // removes first lines (to be redrawn at dragended with a smaller stroke)

  // How do I select only the line associated with the dragged circle?
}

function dragended(d) {
  d3.select(this).classed('active', false);

  // focus.selectAll('lines')
  //   .data(dById)
  //   .enter().append("path")
  //   .attr("class", "line")
  //   .attr("d", function(d) { return connectLine(d.values); })
  //   .attr("stroke", function(d) { return color(d.key); });
}