1

另一个 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 -axis 路径确实消失了。新的（下部）线具有完整的功能，如果您移动与该线关联的点之一，该线将得到调整，您还可以再次移动该线并看到点和线移动......！？首先拖动浅蓝色线（tt：1）时，会发生同样的情况，但是当您重复拖动它时，y 轴路径也会消失，最终会出现一条完全正常工作的连接线，用于深蓝色（tt 2）系列......

完整代码的小提琴在这里：https ://jsfiddle.net/m931k6w2/

我 a) 对新出现的线相对于旧线、y 轴和数据中更新值的位置差异感到困惑，并且 b) 无法将连接线的路径与其他路径隔离开来，想知道我是否不应该找到不使用的解决方法：

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

但我一开始不知道如何画线。

非常感谢任何帮助！

4

0 回答 0