0

私が持っている JSON ファイル形式に基づいて、D3 Javascript ライブラリを使用していくつかの円を描画しようとしています。JSON ファイルは次のとおりです。

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

これは、この JSON 形式に基づいて 3 つの円を描画するための私のコードです。

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

お気づきかもしれませんが、リソースの円を描いてから文字の円を描きました (文字の円は 3 つです)。3 つのリテラル サークルしかないことがキャンバスに表示されます。リソース サークルが見つかりません。誰でも問題が何であるかを見つけるのを手伝ってくれませんか。リソース サークルを表示できないのはなぜですか。ただし、リソース サークルを描画するコードは、リテラル サークルを描画するコードと似ています。あなたの助けは非常に高く評価されます

4

1 に答える 1