运行D3 v6。
这是一个多部分的问题，因为在试图解决原来的问题，我有一个关于D3和鼠标事件的问题。一个快速的注意，而使用我的小提琴，如果你按下ESC键，它将清除绘制线的行为。
1.如何绘制一条从一个节点到另一个节点的直线，跟随光标，而不考虑缩放级别和平移位置？
1.为什么当.on('mousemove')应用于svg和g元素时，我画的线的行为不同？

**问题1.**我遇到的问题是平移和缩放时，线的端点没有正确跟随光标，因为我放大的容器转换了x和y。放大并单击节点可以查看问题。

Related fiddle
在我的演示中，这工作得很好，直到涉及缩放和平移。我已经设法通过使用d3.zoomTransform()来获得当前的[x,y]并将其应用于线的端点来解决平移问题。我无法解决缩放级别。我已经尝试过transform(scale(zoomLevel.k))，但这并不好用。要重现这个问题，单击一个节点而不平移/缩放，观察线条是否跟随光标。缩放图形，然后单击一个节点，观察线条是否跟随光标。

**问题2.**我想我可以通过让光标对我用于缩放和定位的g元素而不是我的父svg元素上的鼠标事件做出React来解决上述问题。当mousemove事件在g上时，无论缩放/平移，该行都跟随光标，但非常滞后，我不明白为什么。

SVG mouseevent的
G mouseevent的
简要代码概述，查看完整代码的小工具

let sourceNode;

const svg = d3.select("#chart")
  .attr("viewBox", [0, 0, width, height]);
const g = svg.append('g');
const drawLine = g.append('line').attr('stroke', 'red').attr('stroke-width', 5).attr('visibility', 'hidden')
const nodes = g.append(//do node stuff)
const links = g.append(//do link stuff)

svg.call(d3.zoom().on('zoom', (event) => {
    g.attr('transform', `translate(${event.transform.x}, ${event.transform.y}) scale(${event.transform.k})`)
  }))

node.on('click', (event, d) => {
    sourceNode = d
})

svg.on('mousemove', (event) => {
  if (sourceNode) {
  const currentZoom = d3.zoomTransform(svg.node());
    drawLine
      .attr('visibility', 'visible')
      .attr('x1', sourceNode.x)
      .attr('y1', sourceNode.y)
      // Remove the currentZoom offset and observe the line being jank
      .attr('x2', d3.pointer(event)[0] - currentZoom.x)
      .attr('y2', d3.pointer(event)[1] - currentZoom.y);
  }
})

字符串