Question

尝试设计同义词库like this。我正在使用由父级和子级组成的外部JSON文件j.json。使用此代码时，会显示一个空网页。不知道哪里出错了。对这个问题有什么看法吗？

<!DOCTYPE html>
    <meta charset="utf-8">
    <style>

    .node circle {
      fill: #999;
       }

      .node text {
        font: 10px sans-serif;
       }

        .node--internal circle {
        fill: #555;
             }

      .node--internal text {
  text-shadow: 0 1px 0 #fff, 0 -1px 0 #fff, 1px 0 0 #fff, -1px 0 0 #fff;
      }

      .link {
       fill: none;
        stroke: #555;
       stroke-opacity: 0.4;
       stroke-width: 1.5px;
          }
    </style>

    <svg width="960" height="1060"></svg>
    <script src="D:\thesaurus\d3.v3.min.js"></script>
    <script>
      var svg = d3.select("svg"),
         width = +svg.attr("width"),
             height = +svg.attr("height"),
       g = svg.append("g").attr("transform", 
    "translate(" + (width / 2    + 40) + "," + (height / 2 + 90) + ")");

    var stratify = d3.stratify()
.parentId(function(d) { return d.id.substring(0, d.id.lastIndexOf(".")); });

   var tree = d3.tree()
.size([360, 500])
.separation(function(a, b) { return
        (a.parent == b.parent ? 1 : 2) /  a.depth; });

     d3.json("j.json", function(error, data) {
          if (error) throw error;

        var root = tree(stratify(data));

          var link = g.selectAll(".link")
           .data(root.descendants().slice(1))
                .enter().append("path")
           .attr("class", "link")
           .attr("d", function(d) {
            return "M" + project(d.x, d.y)
               + "C" + project(d.x, (d.y + d.parent.y) / 2)
             + " " + project(d.parent.x, (d.y + d.parent.y) / 2)
              + " " + project(d.parent.x, d.parent.y);
           });

         var node = g.selectAll(".node")
            .data(root.descendants())
       .enter().append("g")
   .attr("class", function(d) { return "node" +
     (d.children ? " node--internal" : " node--leaf"); })
  .attr("transform", function(d) { return "translate
     (" + project(d.x, d.y) + ")"; });

          node.append("circle")
      .attr("r", 2.5);

       node.append("text")
  .attr("dy", ".31em")
  .attr("x", function(d) { return d.x < 180 === !d.children ? 6 : -6; })
  .style("text-anchor", function(d)
    { return d.x < 180 === !d.children ? "start" : "end"; })
  .attr("transform", function(d)
    { return "rotate(" + (d.x < 180 ? d.x - 90 : d.x + 90) + ")"; })
  .text(function(d) { return d.id.substring(d.id.lastIndexOf(".") + 1); });
      });

       function project(x, y) {
    var angle = (x - 90) / 180 * Math.PI, radius = y;
       return [radius * Math.cos(angle), radius * Math.sin(angle)];
       }

   </script>

j.json

     {"name" : "A", "info" : "tst", "children" : [
                {"name" : "A1", "children" : [
                        {"name" : "A12" },
                        {"name" : "A13" },
                        {"name" : "A14" },
                        {"name" : "A15" },
                        {"name" : "A16" }
                    ] },
                {"name" : "A2", "children" : [
                        {"name" : "A21" },
                        {"name" : "A22", "children" : [
                        {"name" : "A221" },
                        {"name" : "A222" },
                        {"name" : "A223" },
                        {"name" : "A22" }
                    ]},
                        {"name" : "A23" },
                        {"name" : "A24" },
                        {"name" : "A25" }] },
                {"name" : "A3", "children": [
                        {"name" : "A31", "children" :[
                                {"name" : "A311" },
                                {"name" : "A312" },
                                {"name" : "A313" },
                                {"name" : "A314" },
                                {"name" : "A315" }
                            ]}] }
            ]};

d3 src树与外部json文件

0 个答案: