Блог

Еще один d3.js вопрос о перетаскивании / обновлении: Ранее я получал помощь в создании линейных диаграмм, где вы могли бы перетащить точку, и соединительная линия была бы скорректирована. Теперь я пытаюсь изменить это дальше, чтобы можно было как перетаскивать точку (для перемещения только одной точки данных), так И перетаскивать линию для перемещения всех точек / всей серии, представленной выбранной линией.

Я думаю, что теперь я почти все отсортировал — ожидайте правильного обновления перетаскиваемой строки.

После linedrag данные обновляются правильно, но я не могу перерисовать строку так, как я хочу. Я думаю, что часть, если это может быть связано с использованием функции d3.line для рисования соединительных линий — я думаю, что между путями соединительной линии и путями осей происходит какое-то перетекание.

Это код для обновления строк, который работает частично, но таинственным образом:

 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'); 
  

Итак: это работает, но не работает. При выборе темной линии (tt: 2) Сначала появляется движущаяся линия правильной формы и т. Д., Но Она расположена слишком низко (примерно в диапазоне оси y, я думаю?), И старая соединительная линия не исчезает, пока путь по оси x исчезает. Новая (нижняя) строка обладает полной функциональностью в том смысле, что при перемещении одной из точек, связанных с линией, линия корректируется, и вы также можете снова переместить линию и увидеть, как точки и линия перемещаются ….!?
При первом перетаскивании светло-синей линии (tt: 1) происходит то же самое, но при повторном перетаскивании траектория оси y также исчезает, и в конечном итоге появляется полностью рабочая соединительная линия для темно-синей (tt 2) серии…

Скрипка с полным кодом находится здесь: https://jsfiddle.net/m931k6w2 /

Я а) озадачен разницей в расположении вновь появляющихся строк относительно старых строк, оси y и обновленных значений в данных и б) не могу изолировать пути соединительной линии от других путей и задаюсь вопросом, не следует ли мне найти обходной путь, который не использует:

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

тем не менее, я не знаю, как еще рисовать линии в первую очередь.

Любая помощь очень ценится!