Question

我是d3的新手并且必须在这里处理错误。

有人可以向我解释为什么我的代码总是在.content { color:blue; }崩溃并说“无法读取未定义的属性x”

我尝试了示例中的代码，但错误仍然存在。这是我的代码：

d.x

Answer 1

试试这个......

<!DOCTYPE html>
<html>
<head>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
  <script src="graph.js"></script>
</head>
<body>

  <script src="http://d3js.org/d3.v3.min.js"></script>
  <script>
var elementWidth = 300,
    elementHeight = 150,
    screenWidth = 1000,
    screenHeight = 800,
    svg = null;

var drag = d3.behavior.drag()
            .origin(function (d) {
              return { x: d.x, y: d.y };
            })
            .on("drag", dragging);
var zoom = d3.behavior.zoom()
            .scaleExtent([1, 10])
            .on("zoom", zoom);

var nodes = [{ id: 0, x: 10, y: 10 }, { id: 1, x: 600, y: 10 }];
var links = [{ source: 0, target: 1 }];

function createView() {
  d3.select("body")
      .attr("width", screenWidth)
      .attr("height", screenHeight);

  svg = d3.select("body").append("svg")
  .attr("width", screenWidth)
  .attr("height", screenHeight);
  //.call(drag);
}

function addNewNodes() {
  //change parameters

    svg.selectAll("rect").data(nodes).enter().append("rect")
    .attr("x", function (d) { return d.x })
    .attr("y", function (d) { return d.y })
    .attr("width", elementWidth)
    .attr("height", elementHeight)
    .call(drag);
}

/* DRAG & ZOOM */

function zoom() {
  svg.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
}


function dragging(d) {
  d3.select(this).attr("x", d.x = d3.event.x).attr("y", d.y = d3.event.y);
}

/* DRAG & ZOOM END*/
this.createView();
this.addNewNodes();

  </script>
</body>

</html>

首先，您需要为拖动处理程序指定一个唯一的名称，然后您需要访问正确的属性（x和y而不是cx和cy）

function dragging(d) {
  d3.select(this).attr("x", d.x = d3.event.x).attr("y", d.y = d3.event.y);
}

然后你需要将它连接到拖动事件......

var drag = d3.behavior.drag()
            .origin(function (d) {
              return { x: d.x, y: d.y };
            })
            .on("drag", dragging);

然后你需要绑定你的数据。标准的d3方式是......

    svg.selectAll("rect").data(nodes).enter().append("rect")

您不能将.call(drag)放在svg元素上，因为它没有数据绑定，因此d将是未定义的。所以你必须删除它。（//.call(drag)）。

此外，您不需要addNewNodes中的循环，d3负责处理。

Answer 2

只有在分配了绑定到对象的数据时，才会得到（d，i）参数。因此，如果在拖动矩形时需要（d，i）参数，请在创建时绑定数据x和y。

          svg.append("rect")
                .attr("x", nodes[i].x)
                .attr("y", nodes[i].y)
                .data([ {"x":nodes[i].x, "y":nodes[i].y} ])
                .attr("width", elementWidth)
                .attr("height", elementHeight).call(drag);

D3js d.x未定义

2 个答案: