拖動行爲D3

Question

返回NaN的我有這樣的代碼：

var stage = d3.select("body").append("svg"); 
    var points = [0, 50, 100, 150]; 
    var letters = "drag".split(","); 
    var log = d3.select("#log"); 

    //drag behaviour, will bind later 
    var drag = d3.behavior.drag() 
     .origin(Object) 
     .on("drag", dragmove); 


    //append texts 
    var texts = stage 
     .selectAll("text") 
     .data(letters) 
     .enter() 
      .append("text") 
      .attr("font-family", "Arial") 
      .attr("class", "word") 
      .attr("x", function(d,i){return points[i]}) 
      .attr("y", 100) 
      .text(function(d){return d}) 
      .call(drag); 

    function dragmove() { 
     log.text(
      "x: " + d3.event.x + ", " + 
      "y: " + d3.event.y + ", " + 
      "dx: " + d3.event.dx + ", " + 
      "dy: " + d3.event.dy 
      ); 
     d3.select(this).attr("x", d3.event.x); 
    }​ 

然而，d3.event.x和d3.event.y正在返回NaN。有趣的是，d3.event.dx和d3.event.dy正在返回正確的值。我的代碼有什麼問題？

你可以看到這裏的jsfiddle：http://jsfiddle.net/UMwmr/

Answer 1

這是因爲d3.event繼電器數據，如果你在你的代碼檢查：

.attr("x", function(d,i){console.log(d);return points[i]}) 

你會發現，d是文本，它可以」有x，y屬性。

的解決方案是讓每個字母作爲對象（也被分裂他們「」但我客串它應該是‘’），所以這裏的代碼：

var stage = d3.select("body").append("svg"); 
var points = [0, 50, 100, 150]; 
var letters = "drag".split("").map(function(d, i) { 
    return { 
        text: d, 
        x: points[i], 
        y: 100 
    } 
}); 
var log = d3.select("#log"); 

//drag behaviour, will bind later 
var drag = d3.behavior 
    .drag() 
    .origin(Object) 
    .on("drag", dragmove); 


//append texts 
var texts = stage 
    .selectAll("text") 
    .data(letters) 
    .enter() 
       .append("text") 
       .attr("font-family", "Arial") 
       .attr("class", "word") 
       .attr("x", function(d, i) { 
            return d.x; 
       }) 
       .attr("y", 100) 
       .text(function(d) { 
            return d.text; 
        }) 
     .call(drag); 

function dragmove(d) { 
    log.text(
        "x: " + d3.event.x + ", " + 
        "y: " + d3.event.y + ", " + 
        "dx: " + d3.event.dx + ", " + 
        "dy: " + d3.event.dy); 
    //set new position to the object 
    d.x=d3.event.x; 
    d3.select(this).attr("x", d3.event.x); 
}​ 

和fiddle