拖动行为在D3中返回NaN

Question

我有这个代码:

  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);
}?

并且小提琴