使用 d3 拖动，为什么 dragstart 没有设置 d3.event.x？

Question

我可以从on("drag"...)中访问d3.event.x，但x不存在于on("dragstart"...)中;为什么?我怎么才能用另一种方式表达呢，最好不要太粗俗?

检查这个示例的控制台输出:

d3.select("body").append("svg").append("rect")
    .attr("width", 100)
    .attr("height", 100)
    .style("color", "black")
    .call(
        d3.behavior.drag()
            .on("dragstart", function(){
                console.log(d3.event);
            })
            .on("drag", function(){
                console.log(d3.event);
            })
            .on("dragend", function(){
                console.log(d3.event);
            })
        );

JSFiddle

Answer 1

@Lars解释了为什么，那么你怎么做呢?d3。鼠标很灵巧:

    d3.behavior.drag()
        .on("dragstart", function(){
            console.log('relative to rect: ' + d3.mouse(this));
            console.log('relative to body: ' + d3.mouse(d3.select("body").node()));
        })

更新例子。

Answer 2

这是预期的行为(参见文档):

拖动事件(但不包括dragstart和dragend事件)暴露"x"one_answers"y"属性，表示拖动手势在本地坐标中的当前位置。

开始和结束事件在实际拖动发生之前和之后触发，即与第一个和最后一个drag事件相比，没有坐标变化。