D3拖动错误'不能读取属性x的undefined'

Question

我想要获得拖动功能在D3上工作，并直接从开发人员的示例中复制代码。

不过似乎起源（被点击的是什么）没有被正确地传递到变量d，从而导致错误：“不能读取属性‘X’的未定义”

相关的代码：

var drag = d3.behavior.drag() 
     .on("drag", function(d,i) { 
      d.x += d3.event.dx 
      d.y += d3.event.dy 
      d3.select(this).attr("transform", function(d,i){ 
       return "translate(" + [ d.x,d.y ] + ")" 
      }) 
     }); 

var svg = d3.select("body").append("svg") 
     .attr("width", 1000) 
     .attr("height", 300); 

var group = svg.append("svg:g") 
    .attr("transform", "translate(10, 10)") 
    .attr("id", "group"); 

var rect1 = group.append("svg:rect") 
    .attr("rx", 6) 
    .attr("ry", 6) 
    .attr("x", 5/2) 
    .attr("y", 5/2) 
    .attr("id", "rect") 
    .attr("width", 250) 
    .attr("height", 125) 
    .style("fill", 'white') 
    .style("stroke", d3.scale.category20c()) 
    .style('stroke-width', 5) 
    .call(drag); 

Answer 1

通常，在D3中，您可以从某些数据集中创建元素。在你的情况下，你只有一个（也许，有一天你会想要更多）。这里是你如何能做到这一点：

var data = [{x: 2.5, y: 2.5}], // here's a dataset that has one item in it 
    rects = group.selectAll('rect').data(data) // do a data join on 'rect' nodes 
     .enter().append('rect') // for all new items append new nodes with the following attributes: 
      .attr('x', function (d) { return d.x; }) 
      .attr('y', function (d) { return d.y; }) 
      ... // other attributes here to modify 
      .call(drag); 

对于'drag'事件处理程序：

var drag = d3.behavior.drag() 
     .on('drag', function (d) { 

      d.x += d3.event.dx; 
      d.y += d3.event.dy; 

      d3.select(this) 
       .attr('transform', 'translate(' + d.x + ',' + d.y + ')'); 
     }); 

Answer 2

奥列格拿到了它，我只是想提一提，你可能在你的情况做一两件事。

既然你只有一个单一的矩形，你可以直接将数据绑定到它与.datum()，而不是与计算的联接或者具有输入选择打扰：

var rect1 = svg.append('rect') 
    .datum([{x: 2.5, y: 2.5}]) 
    .attr('x', function (d) { return d.x; }) 
    .attr('y', function (d) { return d.y; }) 
    //... other attributes here 
    .call(drag);