Question

我正在尝试使用基于我拥有的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>

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

Answer 1

创建圆圈时，它将永远不会出现在正确的位置，因为您正在覆盖设置该功能的功能（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; });
});

使用基于特定JSON格式的D3 Javascript绘制多个圆圈

1 个答案: