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

Question

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

这是fiddle显示工作水平拖动和断开的垂直拖动。在拖动时查看控制台输出，以查看d3.event返回的值与d3.mouse()返回的水平拖动值匹配，但它们会因垂直拖动而分开。

我可以使用d3.mouse() y坐标而不是d3.event y坐标来修复行为。要查看此信息，请注释掉“DOES NOT 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
    });