dragging line in linechart: update line to new values?

106 Views Asked by At

Yet another d3.js dragging/updating question: I previously got help on creating linecharts where you could drag a dot and the connecting line would adjust. Now I am trying to modify this further so that it is possible to both drag a dot (to move just one datapoint) OR drag the line to move all dots/the entire series represented by the selected line.

I think I have most of it sorted now - expect for the correct updating of the dragged line.

Following a linedrag, the data is updated correctly but I can't get the line to redraw as I want. I think part if it may be due to the use of a d3.line function to draw the connectlines - I think there is some kind of spilling over happening between the paths of the connectline and the paths of the axes.

This is the code to update the lines that works partly yet in mysterious ways:

focus.selectAll("path")
 .merge(focus.selectAll('connectline'))
 .data(dByTime)
 .attr("d", function(d) {
  return connectLine(d.values);
  })
 .attr("stroke", function(d) {
  return color(d.key);
  })
 .attr('stroke-width', 4)
 .style("fill", "none")
 .style('cursor', 'pointer'); 

So: this works but doesn't. When selecting the dark line (tt:2) at first, there is a moving line of the correct shape etc but it's located too low (by about the y-axis range I think?) and the old connectline does not disappear while the x-axis path does disappear. The new (lower) line has full functionality in that if you move one of the dots associated with the line, the line gets adjusted, and you can also move the line again and see the dots AND line move....!? When dragging the light blue line first (tt:1), the same happens, but when you repeat drag it, the y axis path also disappears and eventually a fully working connect line appears for the dark blue (tt 2) series...

A fiddle of the full code is here: https://jsfiddle.net/m931k6w2/

I am a) perplexed by the difference in location for the newly appearing lines relative to the old lines, the y axis and the updated values in the data and b) unable to isolate the paths of the connectline from the other paths and wonder if I should not find a workaround that does not use:

   var connectLine = d3.line()
     .x(function(d) {
       return x(d.tt);
     })
     .y(function(d) {
       return y(d.RT);
     });

yet I don't know how else to draw the lines in the first place.

Any helps much appreciated!

0

There are 0 best solutions below