我刚开始使用 d3.js,无法让简单的演示正常工作。调试起来很困难:如果有错误,它通常会在 d3 的缩小代码中崩溃,并且没有堆栈跟踪。在这种情况下,它根本不会向错误控制台打印任何错误。
当我运行这段代码时,我的所有节点都停留在位置 (0,0),而不是被 force() 布局。怎么了?
<html>
<meta charset="UTF-8">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
$(function() {
var svg = d3.select('#graph').append('svg').attr('width', 900).attr('height', 900)
var myNodes = [{name:'a'}, {name:'b'}, {name:'c'}]
var myLinks = [{source:myNodes[0], target:myNodes[1]}, {source:myNodes[1], target:myNodes[2]}, {source:myNodes[2], target:myNodes[0]}]
svg.append("text").text("myNodes[0].name=" + myNodes[0].name).attr('y', 50)
var force = d3.layout.force().charge(-120).linkDistance(30).size([900, 900])
var link = svg.selectAll("line")
.data(myLinks)
.enter().append("svg:line");
var node = svg.selectAll("circle")
.data(myNodes)
.enter().append("svg:circle")
.attr("r", 6)
.call(force.drag)
force.nodes(myNodes).links(myLinks).start()
});
</script>
</head>
<body>
<div id="graph"></div>
</body>
</html>