Javascript 避免D3.js中的子节点重叠
我正在使用D3.js构建一个树状结构,显示Facebook用户和他/她的Facebook好友。根节点是用户,子节点是朋友。我的UI中有一个固定的宽度,问题是子节点将彼此重叠Javascript 避免D3.js中的子节点重叠,javascript,jquery,facebook,d3.js,Javascript,Jquery,Facebook,D3.js,我正在使用D3.js构建一个树状结构,显示Facebook用户和他/她的Facebook好友。根节点是用户,子节点是朋友。我的UI中有一个固定的宽度,问题是子节点将彼此重叠 var nodes = tree.nodes(root).reverse(), links = tree.links(nodes); nodes.forEach(function(d) { d.y = d.depth * 130; });
var nodes = tree.nodes(root).reverse(),
links = tree.links(nodes);
nodes.forEach(function(d) { d.y = d.depth * 130; });
var node = svg.selectAll("g.node")
.data(nodes, function(d) { return d.id || (d.id = ++i); });
var nodeEnter = node.enter().append("g")
.attr("class", "node")
.attr("value", function(d){
return d.id; })
.attr("transform", function(d) {
return "translate(" + d.x + "," + d.y + ")"; });
var defs = node.append("defs").attr("id", "imgdefs");
var imgPattern = defs.append("pattern")
.attr("id", "img")
.attr("height", 50)
.attr("width", 50)
.attr("x", "0")
.attr("y", "0");
imgPattern.append("image")
.attr("height", 60)
.attr("width", 60)
.attr("xlink:href", function(d) { return d.img; });
nodeEnter.append("circle")
.attr("r", 30)
.style("stroke","white")
.style("stroke-width", 4)
.attr("fill", "url(#img)");
我想为子节点每行/深度显示10个朋友。请提供任何帮助或建议。谢谢大家!
下面是我的JSFIDLE:实现这一点的一种方法是设置。以下是片段:
var tree = d3.layout.tree()
//.size([height, width])
.nodeSize([30,])
.separation(function separation(a, b) {
return a.parent == b.parent ? 2 : 1;
});
我将nodeSize
属性的x
维度设置为圆的半径
此外,需要更改g
变换以重新定位图表:
.attr("transform", "translate(" + (margin.left + width/2) + "," + margin.top + ")");
您可以安全地忽略size
属性(请参阅上面链接中的文档和本文档)
这是一个有变化的例子。我在不同深度添加了另一行圆圈,以检查解决方案是否足够健壮。我想这应该能让你走了。非常感谢你的回复。。。我想问一下如何更改最后一行(3个图像)的链接以连接到父节点?@Kentarou YW。这个问题的初衷是解决重叠问题。如果答案解决了这个问题,你应该接受答案。至于你评论中的问题,最后一行是指我添加到原始数据中的那一行吗?