D3.js 为什么拖动回调中的d3.event与数据坐标有某种关联

我正在玩d3.js，我注意到一个奇怪的拖动行为。 如果我使用data和scaleX/scaleY添加一个圆，当我拖动它时，d3.event.y值相对于“data”数组中的xy坐标，而不是左上角

这是代码和a：如果你打开控制台，如果你拖动第一个圆圈，参考是左上角，如果你拖动第二个圆圈，参考是与{x:3，y:2}相关的东西

var circle2 = svgGraph
  .selectAll('.circle2')
  .data([{ x: 3, y: 2 }])
  .enter()
  .append('circle') // Uses the enter().append() method
  .attr('cx', scaleX(100))
  .attr('cy', scaleY(100))
  .attr('r', 15)
  .call(d3.drag()
    .on('start', (d) => { })
    .on('drag', onHandlerDrag())
    .on('end', (d) => { }));

function onHandlerDrag() {
  return (d) => {
    console.log(d3.event.y);
  }
}

这种行为是故意的吗？关于这件事你有什么参考资料吗

---

谢谢

是的，这是预期的行为。事实上，我们通常在拖动事件中使用

x

和

y

属性，以避免元素在容器中跳跃（当一个人懒得指定正确的主题时）

既然您要求推荐人，请查看：

拖动手势的主题表示被拖动的对象。在拖动手势开始之前，当接收到启动输入事件（如鼠标向下或触摸启动）时，会计算该值

然后，在下一段中，向您介绍最重要的信息：

默认主题是接收初始输入事件的原始选择（参见拖动）中元素的基准；如果此基准未定义，将创建表示指针坐标的对象。因此，在SVG中拖动圆元素时，默认主题是被拖动圆的基准。（强调矿山）

最后：

返回的主题应该是公开

x

和

y

属性的对象，以便在拖动手势期间可以保留主题和指针的相对位置

因此，如果您不希望

拖动所使用的数据中的
x
和
y
，只需在主题中设置一个不同的对象：

.subject(function() {
    return {
        foo: d3.event.x,
        bar: d3.event.y
    };
})

以下是更改后的代码：


函数onHandlerDrag（）{
返回（d）=>{
console.log（d3.event.y）；
}
}
var scaleX=d3
.scaleLinear（）
.domain（[0500]）
.范围（[0，500]）；
var scaleY=d3
.scaleLinear（）
.domain（[0500]）
.范围（[0，500]）；
var svgGraph=d3
.选择（“.area”）
.attr（'width'，500）
.attr（'height'，500）；
var circle1=svgGraph
.append（'圆'）
.attr（'cx'，scaleX（20））
.attr（'cy'，scaleY（20））
.attr（'r'，15）
.call（d3.drag（）
.on（'start'，（d）=>{}）
.on（'drag'，onHandlerDrag（））
.on（'end'，（d）=>{}）；
var circle2=svgGraph
.selectAll（“.circle2”）
.数据([{
x:3，
y:2
}])
.输入（）
.append（'circle'）//使用enter（）.append（）方法
.attr（'cx'，scaleX（100））
.attr（'cy'，scaleY（100））
.attr（'r'，15）
.call（d3.drag（）
.subject（function（）{
返回{
foo:d3.event.x，
酒吧：d3.event.y
};
})
.on（'start'，（d）=>{}）
.on（'drag'，onHandlerDrag（））
.on（'end'，（d）=>{}）

Hmm，我仍然不明白如果“数据”数组存在或缺失，为什么会有这种差异。。。我的目标是当鼠标指针拖动圆时，得到它的y坐标（例如像素），谢谢！是的，它工作得很好！，所以，为了理解，为什么在没有数据属性（如圆圈1）的情况下，拖动的引用看起来是svg的左上角？这一点尚不清楚me@user2010955正如同一API所说：“如果该基准未定义，则会创建一个表示指针坐标的对象”。我认为它是重复的，但也请参见：绝对不是重复的，OP在这里提出了不同的问题：
d3.event
与绑定基准之间的关系。