D3js d.x是未定义的

Question

我是d3新手，这里需要处理一个错误。

有人能解释一下为什么我的代码总是在d.x崩溃，并且说“不能读取未定义的属性x”。

我试过用示例编写代码，但错误仍然存在。这是我的密码：

​

<!DOCTYPE html>
<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.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 d; })
                    .on("drag", dragged);
        var zoom = d3.behavior.zoom()
                    .scaleExtent([1, 10])
                    .on("zoom", zoomed);

        var nodes = [{ id: 0, x: 10, y: 10 }, { id: 1, x: 600, y: 10 }];
        var links = [{ source : 0 , target : 1 }];

        function createView() {
            alert();
                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

                for (var i = 0; i < nodes.length; i++)
                {
                    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);
                }

                
            }

        /* DRAG & ZOOM */
        
            function zoomed()
            {
                svg.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
            }
            
            
            function dragged(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>

​

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