避免 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 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 个朋友。请提供任何帮助或建议。谢谢你！

这是我的jsfiddle：代码在这里 http://jsfiddle.net/5f1e8kgo/5/

实现此目的的一种方法是设置nodeSize and separation的属性树形布局 https://github.com/mbostock/d3/wiki/Tree-Layout。这是片段：

var tree = d3.layout.tree()
    //.size([height, width])
    .nodeSize([30,])
    .separation(function separation(a, b) {
        return a.parent == b.parent ? 2 : 1;
    });

我设置了x的维度nodeSize属性等于圆的半径。

此外，更改g需要进行转换才能重新定位图表：

.attr("transform", "translate(" + (margin.left + width/2) + "," + margin.top + ")");

您可以安全地忽略size属性（请参阅上面链接中的文档和此所以答案 https://stackoverflow.com/questions/17558649/d3-tree-layout-separation-between-nodes-using-nodesize).

这里有一个FIDDLE http://jsfiddle.net/unrsdm4b/随着变化。我在不同深度添加了另一行圆圈，以检查解决方案是否足够稳健。我想这应该能让你继续前进。