gpt4 book ai didi

javascript - 具有奇数个顶点的 D3.js 树,未显示边

转载 作者:行者123 更新时间:2023-11-30 13:02:39 26 4
gpt4 key购买 nike

我有以下使用 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;
});

JSFIDDLE

除了一个顶点有奇数个 child (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 });

这取决于奇数与偶数,因为默认情况下路径没有描边并且填充颜色为黑色。所以直线不会出现,但弯曲的会被填充。

关于javascript - 具有奇数个顶点的 D3.js 树,未显示边,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16812875/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com