使用力不可见形状

Question

我试图让一个简单的节点图示例正常工作。我的数据集有两个节点，它们之间有一个链接。一切看起来很好，直到我调用force.on（...）使用调试器我已经逐步完成代码，看着链接和节点坐标得到更新。代码如下所示。

var force = d3.layout.force().charge(-200).linkDistance(30).size([width, height]);

force.on("tick", function () {
                link.attr("x1", function (d) {
                    return d.source.x;
                })
                .attr("y1", function (d) {
                    return d.source.y;
                })
                .attr("x2", function (d) {
                    return d.target.x;
                })
                .attr("y2", function (d) {
                    return d.target.y;
                });

                node.attr("cx", function (d) {
                    return d.x;
                })
                .attr("cy", function (d) {
                    return d.y;
                });
            });

使用Chrome开发者工具，页面源如下所示，看起来不错。只是无法弄清楚为什么它在页面上无法查看。

<div id="graph" width="100% height="100%>
  <svg width="100%" height="100%" pointer-events="all">
  <line class="link" x1="409.333616222992" y1="384.486594023154"   
        x2="390.5843732878489" y2="415.65241380113304"></line>
  <circle class="node Person" r="10" cx="409.333616222992" 
          cy="384.486594023154"><title>Peter</title></circle>
  <circle class="node Person" r="10" cx="390.5843732878489" 
          cy="415.65241380113304"><title>Michael</title></circle>
  </svg>
</div>