перетаскивание линии на линейной диаграмме: обновить строку до новых значений? - PullRequest
Новая
       34

перетаскивание линии на линейной диаграмме: обновить строку до новых значений?

1 голос
/ 20 апреля 2019

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

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

После выравнивания данных данные обновляются корректно, но я не могу перерисовать строку, как хочу. Я думаю, что частично, если это может быть связано с использованием функции 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 и обновленных значений в данных и b) неспособен изолировать пути соединительной линии от других путей и интересно, если я не должен найти обходной путь, который не использует: 

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

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

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

...