使用 d3.js 可视化解析树
发布于2021-11-03 13:57 阅读(470) 评论(0) 点赞(15) 收藏(3)
我一直试图通过生成d3.js用于绘制树的 HTML 文件来获得解析树的可视化表示。该文件如下所示：
<!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>
我希望它看起来像什么：
它目前的样子：
我是全新的d3.js，老实说，代码取自一个示例，仅由我修改。我设法通过这种方式达到了这一点，但我无法弄清楚哪里出了问题。
我很感激每一点帮助。提前致谢！
解决方案
需要更新样式。添加以下行
.link {
fill: none;
stroke: #ccc;
stroke-width: 2px;
}
对于节点圆形边框
circle {
stroke: #000;
stroke-width: 1px;
}
工作小提琴
所属网站分类: 技术文章 > 问答
作者：黑洞官方问答小能手
链接：http://www.qianduanheidong.com/blog/article/217025/8eac67f7d24cfdd39c7e/
来源：前端黑洞网
任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任
昵称:
评论内容：(最多支持255个字符)
---无人问津也好，技不如人也罢，你都要试着安静下来，去做自己该做的事，而不是让内心的烦躁、焦虑，坏掉你本来就不多的热情和定力