無法顯示d3js樹

Question

我正在嘗試使用d3js創建具有兩個相互連接的節點的樹形圖。 我的JS如下：

var width = window.innerWidth;
var height = window.innerHeight;

var nodes = [{"id":"1","name":"a"},{"id":"2","name":"b"}];
var links = [{"source":0,"target":1}];

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

var tree = d3.layout.tree();
tree.size([width, height]);
tree.nodes(nodes);
tree.links(links);

JS小提琴： https : //jsfiddle.net/eeLfog4m/

不幸的是，頁面上沒有任何內容，我不確定為什么。 有任何想法嗎？

Answer 1

您的數據沒有像普通的樹狀布局那樣顯示。 在評論中以拉爾斯為例： http : //bl.ocks.org/mbostock/4063550

數據如下：

{
 "name": "flare",
 "children": [
  {
   "name": "analytics",
   "children": [
    {
     "name": "cluster",
     "children": [
      {"name": "AgglomerativeCluster", "size": 3938},
      {"name": "CommunityStructure", "size": 3812},
      {"name": "HierarchicalCluster", "size": 6714},
      {"name": "MergeEdge", "size": 743}
     ]
    },
    {
     "name": "graph",
     "children": [
      {"name": "BetweennessCentrality", "size": 3534},
      {"name": "LinkDistance", "size": 5731},
      {"name": "MaxFlowMinCut", "size": 7840},
      {"name": "ShortestPaths", "size": 5914},
      {"name": "SpanningTree", "size": 3416}
     ]
    },.....

您確定不想要強制布局？ ： https : //bl.ocks.org/mbostock/4062045

這是您的數據的力量： https : //jsfiddle.net/reko91/s6fug9q6/

 var width = window.innerWidth; var height = window.innerHeight; var color = d3.scale.category20(); var nodes = [{"id":"1","name":"a"},{"id":"2","name":"b"}]; var links = [{"source":0,"target":1}]; var svg = d3.select("body").append("svg"); svg.attr("width", width); svg.attr("height", height); svg.append("svg:g"); var force = d3.layout.force() .charge(-120) .linkDistance(30) .size([width, height]); force .nodes(nodes) .links(links) .start(); var link = svg.selectAll(".link") .data(links) .enter().append("line") .attr("class", "link") .style("stroke-width", function(d) { return Math.sqrt(d.value); }); var node = svg.selectAll(".node") .data(nodes) .enter().append("circle") .attr("class", "node") .attr("r", 5) .style("fill", function(d,i) { return color(i); }) .call(force.drag); node.append("title") .text(function(d) { return d.name; }); force.on("tick", function() { link.attr("x1", function(d) { return d.source.x; }) .attr("y1", function(d) { return d.source.y; }) .attr("x2", function(d) { return d.target.x; }) .attr("y2", function(d) { return d.target.y; }); node.attr("cx", function(d) { return dx; }) .attr("cy", function(d) { return dy; }); }); 

 .node { stroke: #fff; stroke-width: 1.5px; } .link { stroke: #999; stroke-opacity: .6; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script> 

您可以顯式放置這些節點。