d3.event.y 在拖动行为期间具有奇怪的值

Question

我正在创建一个示例，说明使用 D3 拖动行为和 CSS {display: table} 样式的可调整大小单元格的布局。它适用于水平拖动，但不适用于垂直拖动。对于垂直调整大小，d3.event.y 提供的值对我来说没有意义。

这是一个fiddle，显示了有效的水平拖动和损坏的垂直拖动。拖动时查看控制台输出，可以看到d3.event 返回的值与d3.mouse() 在水平拖动时返回的值相匹配，但在垂直拖动时它们是不同的。

我可以通过使用d3.mouse() y 坐标而不是d3.event y 坐标来修复此行为。要查看这一点，请注释掉“DOESN'T WORK”行并取消注释“WORKS”行。但是，我不明白为什么需要这样做，而且似乎不太通用，因为我必须假设鼠标输入而不是使用更通用的 d3.event。

这是一个错误，还是我无法理解这里的某些内容？

请注意，this question 似乎遇到了同样的问题，但使用的是 HTML 表格而不是 CSS 表格。我认为记录此问题在两种情况下都发生会很有帮助。

还要注意，注释掉实际上进行垂直调整大小的两行，用“RESIZE CELLS”注释，使d3.event 正常工作。当然，那时表格不会调整大小。这表明调整导致 d3.event 误入歧途的 div 大小的行为有关。

Answer 1

好的，我想我已经解决了这个问题。如果您查看the code 的拖动行为，您会注意到dragstart 中用于计算鼠标偏移的值基于this.parentNode。简而言之，它使用this.parentNode 作为参考点，并假设它在拖动期间会保持稳定。您在拖动过程中修改了父节点，所以它的参考点，从技术上讲，非常无聊。在这种情况下，使用d3.mouse 是最好的选择，因为d3.event.y 只有在父节点保持在位时才会可靠。

对您来说，这只发生在 y 方向的原因是所有行的 x 位置（这里是父节点）保持不变，而 y 分量在拖动过程中会发生变化。

相关代码部分：

parent = that.parentNode,

function moved() {
    var position1 = position(parent, dragId), dx, dy;

    //...

    dispatch({
      type: "drag",
      x: position1[0] + dragOffset[0],
      y: position1[1] + dragOffset[1],
      dx: dx,
      dy: dy
    });