使用 d3.js 可视化解析树答案

【问题标题】：Visualizing a parse tree with d3.js使用 d3.js 可视化解析树
【发布时间】：2016-07-06 11:15:00
【问题描述】：

我一直试图通过生成一个使用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>

我希望它看起来像什么：

目前的样子：

我对@987654325@ 完全陌生，老实说，代码取自一个示例，仅由我修改。我设法通过这种方式达到了这一点，但我就是不知道哪里出了问题。

我将不胜感激。提前致谢！

【问题讨论】：

在您的 CSS 中，将路径填充设置为无。像这样：path { fill: none; }.
如果我这样做，链接将完全不可见。
设置描边（任意颜色）和描边宽度。

标签： javascript html d3.js parse-tree

【解决方案1】：

需要更新样式。添加以下行

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

用于节点圆形边框

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

工作fiddle

【讨论】：

啊，非常感谢！你知道我怎样才能在节点周围画出轮廓吗？
你的意思是节点圈周围的边框吗？
是的，就像第一张图片一样。