用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可视化解析树

回答

相关问题