看到“;未捕获的类型错误:无法读取属性'weight'未定义的“;尽管按照字面上的指示

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

本文关键字：weight 未定义 指示 字面上 类型 错误 读取 看到 属性      更新时间：2023-09-26

过去几天我一直在学习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>

您得到的错误源于这个错误：

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

它不包含源/目标链接的原始数组，而是您创建的d3对象。我想你可能是指var link而不是var links。

一旦你修复了这个问题，你会发现变量"animationStep"在"tick"函数中使用之前没有定义。

相关文章：