D3js d.x 未定义

Question

我是 d3 的新手，必须处理这里的错误。

有人可以向我解释为什么我的代码总是在 d.x 崩溃并说 "Cannot read property x of undefined"

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

<!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

只有当您分配有数据绑定到事件正在发生的对象时，您才会得到 ( 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);

Answer 2

试试这个...

<!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 会处理它。

D3js d.x 未定义

D3js d.x is undefined

javascript

undefined

d3.js