用d3.js可視化解析樹

我一直在試圖通過生成一個使用d3.js繪製樹的HTML文件來獲得解析樹的可視化表示。該文件是這樣的：用d3.js可視化解析樹

<!DOCTYPE html> 
<meta charset="utf-8"> 
<head><title> Tree Visualization </title></head> 
<script src="https://d3js.org/d3.v3.min.js"></script> 

<script type="text/javascript"> 
    function drawTree(o) { 
     d3.select("#"+o.divID).select("svg").remove() 

     var viz = d3.select("#"+o.divID) 
      .append("svg") 
      .attr("width", o.width) 
      .attr("height", o.height) 

     var vis = viz.append("g") 
      .attr("id","treeg") 
      .attr("transform", "translate("+ o.padding +","+ o.padding +")") 

     var tree = d3.layout.tree() 
      .size([o.width - (2 * o.padding), o.height - (2 * o.padding)]); 

     var diagonal = d3.svg.diagonal() 
      .projection(function(d) { return [d.x, d.y]; }); 

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

     var link = vis.selectAll("pathlink") 
      .data(tree.links(nodes)).enter() 
      .append("path") 
      .attr("class", "link") 
      .attr("d", diagonal) 

     var node = vis.selectAll("g.node") 
      .data(nodes).enter() 
      .append("g") 
      .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; }) 

     node.append("circle") 
      .attr("r", 10) 
      .style("fill", function(d) { return (d.children) ? "#E14B3B" : "#1C8B98" }); 

     node.append("svg:text") 
      .attr("dx", function(d) { return d.children ? 0 : 0; }) 
      .attr("dy", function(d) { return d.children ? 5 : 5; }) 
      .attr("text-anchor", function(d) { return d.children ? "middle" : "middle"; }) 
      .style("fill", "white").text(function(d) { return d.name; }) 
    } 
</script> 

<body onLoad="drawTree({divID: 'viz', width: 600, height: 400, padding: 50, treeData: {name: 'S', children: [{name: 'S', children: [{name: 'S', children: [{name: 'S', children: [{name: 'x'}]}, {name: 'S', children: [{name: 'y'}]}, {name: '*'}]}, {name: 'S', children: [{name: '1'}]}, {name: '+'}]}, {name: 'S', children: [{name: 'S', children: [{name: '1'}]}, {name: '-'}]}, {name: '+'}]}})"> 
<div id="viz"></div> 
</body> 
</html>

我希望它是什麼樣子： this

什麼它目前看起來像： this

我完全新的d3.js，並且是誠實，代碼取自一個例子，只能由我修改。我設法以這種方式達到這一點，但我無法弄清楚它出錯的地方。

我很感激每一點幫助。提前致謝！

來源

2016-07-06 Domenic Quirl

在你的CSS，設置路徑填寫爲無。像這樣：'path {fill：none; }'。 –

如果我這樣做，鏈接是完全不可見的。 –

設置筆畫（任何顏色）和筆畫寬度。 –

需要更新樣式。下面添加行

.link { 
    fill: none; 
    stroke: #ccc; 
    stroke-width: 2px; 
}

對於節點一圈邊框

circle { 
    stroke: #000; 
    stroke-width: 1px; 
}

工作fiddle

來源

2016-07-06 11:24:28 scsiva1991

啊，非常感謝！你知道我怎麼能夠在節點上繪製輪廓嗎？ –

你的意思是圍繞節點圈子的邊界嗎？ – scsiva1991

是的，就像第一張圖片一樣。 –

用d3.js可視化解析樹

回答

相關問題