使用NodeSize在节点之间进行D3树布局分离

Question

现在我正在尝试分离我的矩形节点,因为它们重叠,如下图所示:

我看了一眼,发现D3提供了nodeSize和分离方法,但由于某种原因它没有用.

我发现这篇博客文章谈到了这个问题,但他说

size属性在节点中不存在,因此它将是您想要控制它们大小的任何属性.

但显然有一个nodeSize方法,所以我觉得我只是错误地使用该方法和/或博客文章已过时.我想将我的节点整形为矩形的大小并将它们均匀分开,这样它们就不会相互重叠.有谁知道如何正确使用这些方法？关于这些方法的文档没有得到很好的解释,并没有产生任何差别.我也找不到很多人们改变树的nodeSize或需要分离矩形对象的例子(有一些关于圆形对象的例子,但我觉得这太不一样了......)

这是相关的代码.我会尝试准备一个JSFiddle.

var margin = {top: 20, right: 120, bottom: 20, left: 120},
    height = 960 - margin.right - margin.left,
    width = 800 - margin.top - margin.bottom,
    rectW = 70;
    rectH = 30;
    //bbox = NaN,
    maxTextLength = 0;

var i = 0,
    duration = 750,
    root;


//paths from each node drawn initially here
//changed to d.x, d.y
var diagonal = d3.svg.diagonal()
    .projection(function(d) { return [d.x+rectW/2, d.y+rectH/2];
    //.projection(function(d) { return [d.x+bbox.getBBox().width/2, d.y+bbox.getBBox().height/2]; 
});

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

var svg = d3.select("body")
            .append("svg")
              .attr("height","100%").attr("width","100%")
              .call(d3.behavior.zoom().on("zoom", redraw))
              .append("g")
                .attr("transform", "translate(" + margin.top + "," + margin.left + ")");

Answer 1

更新05/04/2018:我的理解是d3已经改变了很多(为了更好)更加模块化.对于那些正在寻找这个答案的人来说,这是使用更老版本的d3(特别是v3).

许多调查结果仍然与下面的d3-hierarchy软件包相关cluster.size(),cluster.nodeSize()并且我计划可能更新我的示例以使用它.但是,作为历史参考,我不会触及底部.

这是一个jsFiddle:http://jsfiddle.net/augburto/YMa2y/

编辑:更新并将示例移动到Codepen.这个例子仍然存在于jsFiddle上,但Codepen似乎有一个更好的编辑器,并允许您轻松分叉.一旦我减少了内容的数量,我还会尝试将示例直接添加到此答案中.

http://codepen.io/augbog/pen/LEXZKK

更新此答案.我和我的朋友谈过,我们查看了源码size和nodeSize

  tree.size = function(x) {
    if (!arguments.length) return nodeSize ? null : size;
    nodeSize = (size = x) == null;
    return tree;
  };

  tree.nodeSize = function(x) {
    if (!arguments.length) return nodeSize ? size : null;
    nodeSize = (size = x) != null;
    return tree;
  };

当您设置size的树,你设置一个固定的尺寸,使树有符合宽度和高度.设置a时nodeSize,树必须是动态的,因此它会重置树的大小.

当我指定size之后nodeSize,我几乎压倒了我想要的东西哈哈......

底线:如果你想nodeSize工作,你就不能拥有固定的树木大小.它会将大小设置为null.size如果你宣布a ,请不要声明nodeSize.

编辑:D3.js实际上更新了文档.感谢无论谁做到了,因为它现在更清晰了!

nodeSize属性与tree.size不同; 设置tree.nodeSize将tree.size设置为null.

这就是我的树现在的样子.我还添加了缩放功能以及如何在矩形中居中文本.

Answer 2

在我对自己进行挖掘之前,我不太明白接受的答案,所以我想我也会分享我发现的东西......

如果您正在使用.size()并且节点重叠,请.nodeSize()改用

正如在接受的答案中所解释的那样,.size()设置树的可用大小,因此根据堂兄节点,第二堂兄弟等之间的间距,它们可能会被挤压在一起并重叠.使用.nodeSize()简单地说每个节点应该获得这么大的空间,所以它们永远不会重叠!

最终为我工作的代码是

var nodeWidth = 300;
var nodeHeight = 75;
var horizontalSeparationBetweenNodes = 16;
var verticalSeparationBetweenNodes = 128;

var tree = d3.layout.tree()
    .nodeSize([nodeWidth + horizontalSeparationBetweenNodes, nodeHeight + verticalSeparationBetweenNodes])
    .separation(function(a, b) {
        return a.parent == b.parent ? 1 : 1.25;
    });

没有horizontalSeparationBetweenNodes和verticalSeparationBetweenNodes节点边缘相互接触.我还添加了这个.separation()以减少表兄节点之间的空间量,因为我的节点非常宽并且浪费了大量空间.

注意:这适用于d3 v3,而不是v4