Question

我正在关注ReportViewer以使用D3.js

显示决策树

这是我完整的代码，100％基于上面的教程。由于某种原因，树不会出现。如果有人能解释我的错误，我感激不尽：

<!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="2000"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>

var treeData = {
     name: "/",
     contents: [
         {
             name: "Applications",
             contents: [
                 { name: "Mail.app" },
                 { name: "iPhoto.app" },
                 { name: "Keynote.app" },
                 { name: "iTunes.app" },
                 { name: "XCode.app" },
                 { name: "Numbers.app" },
                 { name: "Pages.app" }
             ]
         },
         {
             name: "System",
             contents: []
         },
         {
             name: "Library",
             contents: [
                 {
                     name: "Application Support",
                     contents: [
                         { name: "Adobe" },
                         { name: "Apple" },
                         { name: "Google" },
                         { name: "Microsoft" }
                     ]
                 },
                 {
                     name: "Languages",
                     contents: [
                         { name: "Ruby" },
                         { name: "Python" },
                         { name: "Javascript" },
                         { name: "C#" }
                     ]
                 },
                 {
                     name: "Developer",
                     contents: [
                         { name: "4.2" },
                         { name: "4.3" },
                         { name: "5.0" },
                         { name: "Documentation" }
                     ]
                 }
             ]
         },
         {
             name: "opt",
             contents: []
         },
         {
             name: "Users",
             contents: [
                 { name: "pavanpodila" },
                 { name: "admin" },
                 { name: "test-user" }
             ]
         }
     ]
};

 var tree = d3.layout.tree()
     .sort(null)
     .size([size.height, size.width - maxLabelLength*options.fontSize])
     .children(function(d)
     {
         return (!d.contents || d.contents.length === 0) ? null : d.contents;
     });

 var nodes = tree.nodes(treeData);
 var links = tree.links(nodes);

  var layoutRoot = d3.select(containerName)
      .append("svg:svg").attr("width", size.width).attr("height", size.height)
      .append("svg:g")
      .attr("class", "container")
      .attr("transform", "translate(" + maxLabelLength + ",0)");


  // Edges between nodes as a <path class="link" />
  var link = d3.svg.diagonal()
      .projection(function(d)
      {
          return [d.y, d.x];
      });

  layoutRoot.selectAll("path.link")
      .data(links)
      .enter()
      .append("svg:path")
      .attr("class", "link")
      .attr("d", link);


  /*
      Nodes as
      <g class="node">
          <circle class="node-dot" />
          <text />
      </g>
   */
 var nodeGroup = layoutRoot.selectAll("g.node")
      .data(nodes)
      .enter()
      .append("svg:g")
      .attr("class", "node")
      .attr("transform", function(d)
      {
          return "translate(" + d.y + "," + d.x + ")";
      });

  nodeGroup.append("svg:circle")
      .attr("class", "node-dot")
      .attr("r", options.nodeRadius);

  nodeGroup.append("svg:text")
      .attr("text-anchor", function(d)
      {
          return d.contents ? "end" : "start";
      })
      .attr("dx", function(d)
      {
          var gap = 2 * options.nodeRadius;
          return d.contents ? -gap : gap;
      })
      .attr("dy", 3)
      .text(function(d)
      {
          return d.name;
      });

</script>

使用D3可视化决策树

0 个答案: