具有奇数个顶点的 D3.js 树,未显示边 [英] D3.js tree with odd number of vertices, edges not shown
问题描述
我有以下 JavaScript 代码,它使用 D3.js 库来绘制一棵树(它遵循标准结构可以在各种在线教程中找到):
I have the following JavaScript code that uses the D3.js library to draw a tree (it follows the standard structure one can find in the various online tutorials):
var json = {
"name": "A",
"children": [{
"name": "B"
}]
};
var tree = d3.layout.tree().size([200, 200]);
var nodes = tree.nodes(json);
var vis = d3.select("#chart").attr("width", 300)
.attr("height", 300)
.append("svg:g")
.attr("transform", "translate(40, 40)");
var diagonal = d3.svg.diagonal();
var link = vis.selectAll("path.link").data(tree.links(nodes)).enter()
.append("svg:path")
.attr("class", "link")
.attr("d", diagonal);
var node = vis.selectAll("g.node").data(nodes).enter().append("svg:g")
.attr("class", "node")
.attr("transform", function (d) {
return "translate(" + d.x + "," + d.y + ")";
});
node.append("svg:circle").attr("r", 10);
node.append("svg:text").attr("dx", function (d) {
return 10;
})
.attr("dy", 10)
.attr("text-anchor", function (d) {
return "start";
})
.text(function (d) {
return d.name;
});
除了顶点具有奇数个子节点 (1, 3, ...) 的树外,它几乎都能正常工作;在这种情况下,将不会绘制奇数顶点的边(例如,在上面的示例中,不显示 A 和 B 之间的边).我错过了什么?
It works mostly fine, except for trees in which a vertex has an odd number of children (1, 3, ...); in this case, the edge for the odd vertex will not be drawn (e.g., in the above example, the edge between A and B is not displayed). What am I missing?
推荐答案
您缺少节点链接的样式.一些变体:
You are missing the style for the node links. Something variation of this:
<style>
.link {
fill: none;
stroke: #ccc;
stroke-width: 4.5px;
}
</style>
或者,将其设置在链接本身上:
Or, set it on the link itself:
.attr("d", diagonal).attr({ 'fill': 'none', 'stroke': 'grey', 'stroke-width': 4 });
这取决于奇数与偶数,因为默认情况下,路径没有描边且填充颜色为黑色.所以直线不会出现,但曲线会被填满.
It depends on odd vs. even number because by default a path gets no stroke and a fill color of black. So a straight line doesn't show up but the curved ones get filled.
这篇关于具有奇数个顶点的 D3.js 树,未显示边的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!