d3.js - d3.event.x 没有得到 x 光标的位置

Question

当我使用 d3.behavior.drag() 时，我不明白为什么 d3.event.x == NaN 而不是 x 光标的位置。
我使用 d3.event.sourceEvent.offsetX 代替，但它仅适用于 Chrome(例如不适用于 Firefox)。
副作用可以在这里看到:
http://gloumouth1.free.fr/test/Nature
用户只能使用 Chrome 移动“频率光标”。
任何的想法 ？
G。

Answer 1

在我看来，d3.js 是一个糟糕的文档库。对不起 Mike Bostock ，但就我个人而言，如果不调试源代码和示例，有时绝对不可能找到“为什么”。

现在，答案是:

第一

d3 可以在任何浏览器中正确创建和识别像 d3.event.x 这样的自己的事件，但是 您应该绘制可拖动的界面元素 内部 <g></g> !您不应该在 <svg></svg> 中精确地放置圆形、矩形或稍后要拖动的任何内容。 .这没有记录。

例子:

<svg>
   <rect></rect>  // you can not use 'd3.event.x' or 'd3.event.y' for this element.
                  // for this element is possible to use 'd3.event.sourceEvent.x' in Chrome 
                  // and 'd3.event.sourceEvent.offsetX' in Firefox.
                  // d3.event.x === NaN, d3.event.y === NaN in any browser
   <g>
      <rect></rect> //  'd3.event.x' and 'd3.event.y' will work for this element
   </g>
<svg>

第二
<g></g>包装器应该存储 data([{x:..., y:...}])即使你不需要它。没有 <g></g> 中的数据, .origin()方法将无法正常工作，元素将在光标下不可预测地跳到窗口上。

最后

让我们在一个示例中结合所有有关拖动的知识:

    var draggable = d3.behavior.drag()
            .origin(Object) // the sequence function(d){return(d);} in not necessary 
            .on("drag", drg);

    var board = d3.select("body").append("svg:svg").attr({width: 500, height: 500});
    var wrap = board.append("svg:g")
            .data([{x: 100, y: 100}]); // this is the coordinates of draggable element
                                       // they should be stored in <g></g> wrapper as the data

// IMPORTANT! There is no wrap.data().enter() sequence
// You should not call .enter() method for <g></g> data,
// but nested elements will read the data() freely 

    var handle = wrap.append("svg:circle")
            .attr({
                cx: function(d){return(d.x);}, // position of circle will be stored in the data property of <g> element
                cy: function(d){return(d.x);}, 
                r: 30, 
                fill: "gray", 
                stroke: "black"
            }).call(draggable);

    function drg(d){
        // now d3.event returns not a mouse event, 
        // but Object {type: "drag", x: ..., y: ..., dx: ..., dy: ...}
        d3.select(this).attr({
            // reposition the circle and
            // update of d.x, d.y
            cx: d.x = Math.max(0, Math.min(500 - 60, d3.event.x)), // 500 - width of svg, 60 - width of circle  
            cy: d.y = Math.max(0, Math.min(500 - 60, d3.event.y))  // 500 - height of svg, 60 - height of circle
        });        
    }

演示: http://jsfiddle.net/c8e2Lj9d/4/