Question

还有另一个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/

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

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

但是我不知道首先如何画线。

任何帮助都值得赞赏！

在折线图中拖动线：将线更新为新值？

0 个答案: