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

D3拖动错误'无法读取未定义的属性x'

2 个答案: