d3.js强制布局未运行_D3.js_Force Layout

d3.js强制布局未运行

d3.js

d3.js强制布局未运行,d3.js,force-layout,D3.js,Force Layout,我刚开始使用d3.js，无法让一个简单的演示正常工作。调试起来很困难：如果有bug，它经常会在d3没有堆栈跟踪的小型代码中崩溃。在这种情况下，它根本不会将任何错误打印到错误控制台当我运行此代码时，我的所有节点都卡在位置0,0，而不是强制布局。怎么了 <html> <meta charset="UTF-8"> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/j

我刚开始使用d3.js，无法让一个简单的演示正常工作。调试起来很困难：如果有bug，它经常会在d3没有堆栈跟踪的小型代码中崩溃。在这种情况下，它根本不会将任何错误打印到错误控制台

当我运行此代码时，我的所有节点都卡在位置0,0，而不是强制布局。怎么了

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

Force仅处理：

。。。初始x和y坐标（如果尚未在外部设置为有效数字）通过检查相邻节点来计算

它实际上并不处理相应svg形状的更新。您通常会在以下情况下执行此操作：

收听勾选事件以更新节点的显示位置

示例中唯一缺少的另一项是设置线条的样式。默认情况下，它们没有笔划颜色，因此看起来不可见。您可以直接在线上设置颜色，如下所示：

var link = svg.selectAll("line")
              .data(myLinks)
              .enter().append("svg:line")
              .attr('stroke', 'red')
              .attr('stroke-width', 2)

或者为他们制作一个CSS类：

<style>
.link {
  stroke: blue;
  stroke-width: 1.5px;
}
</style>

<style>
.link {
  stroke: blue;
  stroke-width: 1.5px;
}
</style>

var link = svg.selectAll("line")
              .data(myLinks)
              .enter().append("svg:line")
              .attr('class', 'link')