Seeing "Uncaught TypeError: Cannot read property 'weight' of undefined" despite following instructions to the letter

Question

最近几天我一直在学习 D3。我试图将我一直在学习的所有内容简化为一个简单的 D3 示例，但我看到了标题中提到的错误。

我确定这很简单，我错过了什么？

代码：

<html>
<head>
<style>
.node {
    fill: #ccc;
    stroke: #fff;
    stroke-width: 2px;
}

.link {
    stroke: #777;
    stroke-width: 2px;
}
</style>
<script src='http://d3js.org/d3.v3.min.js'></script>
<script>
window.onload = function() {

var width = 600,
    height = 300;

var graph = {
    "nodes": [  { "x": 208.992345, "y": 273.053211 },
                { "x": 595.98896,  "y":  56.377057 },
                { "x": 319.568434, "y": 278.523637 },
                { "x": 214.494264, "y": 214.893585 },
                { "x": 482.664139, "y": 340.386773 },
                { "x":  84.078465, "y": 192.021902 },
                { "x": 196.952261, "y": 370.798667 },
                { "x": 107.358165, "y": 435.15643  },
                { "x": 401.168523, "y": 443.407779 },
                { "x": 508.368779, "y": 386.665811 },
                { "x": 355.93773,  "y": 460.158711 },
                { "x": 283.630624, "y":  87.898162 },
                { "x": 194.771218, "y": 436.366028 },
                { "x": 477.520013, "y": 337.547331 },
                { "x": 572.98129,  "y": 453.668459 },
                { "x": 106.717817, "y": 235.990363 },
                { "x": 265.064649, "y": 396.904945 },
                { "x": 452.719997, "y": 137.886092 }
            ],
    "links": [  { "target": 11, "source":  0 },
                { "target":  3, "source":  0 },
                { "target": 10, "source":  0 },
                { "target": 16, "source":  0 },
                { "target":  1, "source":  0 },
                { "target":  3, "source":  0 },
                { "target":  9, "source":  0 },
                { "target":  5, "source":  0 },
                { "target": 11, "source":  0 },
                { "target": 13, "source":  0 },
                { "target": 16, "source":  0 },
                { "target":  3, "source":  1 },
                { "target":  9, "source":  1 },
                { "target": 12, "source":  1 },
                { "target":  4, "source":  2 },
                { "target":  6, "source":  2 },
                { "target":  8, "source":  2 },
                { "target": 13, "source":  2 },
                { "target": 10, "source":  3 },
                { "target": 16, "source":  3 },
                { "target":  9, "source":  3 },
                { "target":  7, "source":  3 },
                { "target": 11, "source":  5 },
                { "target": 13, "source":  5 },
                { "target": 12, "source":  5 },
                { "target":  8, "source":  6 },
                { "target": 13, "source":  6 },
                { "target": 10, "source":  7 },
                { "target": 11, "source":  7 },
                { "target": 17, "source":  8 },
                { "target": 13, "source":  8 },
                { "target": 11, "source": 10 },
                { "target": 16, "source": 10 },
                { "target": 13, "source": 11 },
                { "target": 14, "source": 12 },
                { "target": 14, "source": 12 },
                { "target": 14, "source": 12 },
                { "target": 15, "source": 12 },
                { "target": 16, "source": 12 },
                { "target": 15, "source": 14 },
                { "target": 16, "source": 14 },
                { "target": 15, "source": 14 },
                { "target": 16, "source": 15 },
                { "target": 16, "source": 15 },
                { "target": 17, "source": 16 }
            ]
};

var nodes = graph.nodes;
var links = graph.links;

var svg = d3.select("body").append("svg")
    .attr({
        "width": width,
        "height": height
    })


var node = svg.selectAll(".node")
    .data(nodes)
    .enter()
    .append("g")
    .classed("node", true)

node
    .append("circle")
    .attr("r", width / 100)

var links = svg.selectAll(".link")
    .data(links)
    .enter()
    .append("line")
    .classed("link", true)

var force = d3.layout.force()
    .nodes(nodes)
    .links(links)
    .size([width, height])
    .on("tick", tick)
    .start()

function tick() {
    node.transition().ease('linear').duration(animationStep)
        .attr({
            "cx": function(d) {return d.x},
            "cy": function(d) {return d.y},
            "r": 10     
    })

    link.transition().ease('linear').duration(animationStep)
        .attr({
            "x1": function(d) {return d.source.x},
            "y1": function(d) {return d.source.y},
            "x2": function(d) {return d.target.x},
            "y2": function(d) {return d.target.y}
    })
}

}
</script>
</head>
<body>

</body>

</html>

Answer 1

您收到的错误源于此错误：

var links = svg.selectAll(".link")
    .data(links)
    .enter()
    .append("line")
    .classed("link", true)

您正在覆盖之前声明的变量 "links"。这意味着当您稍后在此处传递 "links" 时：

var force = d3.layout.force()
    .nodes(nodes)
    .links(links)
    .size([width, height])
    .on("tick", tick)
    .start()

它不包含您的原始 source/target 链接数组，而是您创建的 d3 对象。我认为您可能是指 var link 而不是 var links。

修复该问题后，您会看到变量 "animationStep" 在用于 "tick" 函数之前未定义。

Seeing "Uncaught TypeError: Cannot read property 'weight' of undefined" despite following instructions to the letter

Seeing "Uncaught TypeError: Cannot read property 'weight' of undefined" despite following instructions to the letter

javascript

d3.js