0

我正在尝试使用基于我拥有的 JSON 文件格式的 D3 Javascript 库绘制一些圆圈。这是 JSON 文件：

{"Resources":[{"resource":[{"name":"A"}]}],
              "literals":[{"literal":[{"name":"B"},{"name":"C"}]}]}

这是我基于此 JSON 格式绘制三个圆圈的代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Sample2</title>
<style>

.node {
      stroke: #fff;
      stroke-width: 1.5px;
}

.link {
      stroke: #999;
      stroke-opacity: .6;
}

</style>
</head>
<body>

<script type="text/javascript" src="d3/d3.v3.js"></script>
<script>
var width = 1000;//960,
height = 500;

var color = d3.scale.category20();

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

var svg = d3.select("body").append("svg")
   .attr("width", width)
   .attr("height", height);

d3.json("folder/newjsonsample6.json", function(error, graph) {

// Resource 
   force 
    .nodes(graph.Resources[0].resource)
    .start();
    var resourceNode = svg.selectAll(".node")
    .data(graph.Resources[0].resource)
            .append("circle")
            .attr("class", "node")
            .attr("r", 20)
            .style("fill", function(d) { return color(2); })
            .call(force.drag);
        resourceNode.append("title")
            text(function(d) { return d.name; });

       force.on("tick", function() {
       resourceNode.attr("cx", function(d) { return d.x; })
       .attr("cy", function(d) { return d.y; });

       resourceNode.attr("cx", function(d) { return d.x; })
           .attr("cy", function(d) { return d.y; });
    });
// Literals
   force
   .nodes(graph.literals[0,0].literal) 
   .start();

    var node = svg.selectAll(".node")
        .data(graph.literals[0,0].literal)
        .enter().append("circle")
        .attr("class", "node")
        .attr("r", 10)
        .style("fill", function(d) { return color(1); })
        .call(force.drag);

        node.append("title")
        .text(function(d) { return d.name; });

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

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

        });
        });

        </script>
        </body>
        </html>

您可能会注意到，我画了资源圈，然后是文字圈（文字圈是三个）。它在画布上向我显示只有三个文字圆圈。我找不到资源圈。谁能帮我找出问题所在。为什么我无法显示资源圈但是绘制资源圈的代码类似于绘制文字圈的代码。非常感谢您的帮助

4

1 回答 1

0

圆圈已创建，它只是永远不会出现在正确的位置，因为您正在覆盖设置它的函数（on tick 函数）。如果您将其定义如下，它应该可以工作。

force.on("tick", function() {
   resourceNode.attr("cx", function(d) { return d.x; })
       .attr("cy", function(d) { return d.y; });
   node.attr("cx", function(d) { return d.x; })
       .attr("cy", function(d) { return d.y; });
});
于 2013-11-14T22:50:23.597 回答