[英]D3.js tree with odd number of vertices, edges not shown
我有以下使用D3.js庫繪制樹的JavaScript代碼(它遵循在各種在線教程中可以找到的標准結構):
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之間的邊緣)。 我想念什么?
您缺少節點鏈接的樣式。 這種變化:
<style>
.link {
fill: none;
stroke: #ccc;
stroke-width: 4.5px;
}
</style>
或者,在鏈接本身上進行設置:
.attr("d", diagonal).attr({ 'fill': 'none', 'stroke': 'grey', 'stroke-width': 4 });
它取決於奇數與偶數,因為默認情況下,路徑不會描邊,並且填充顏色為黑色。 因此,不會出現直線,但會填充彎曲的直線。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.