42

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

在此处输入图像描述

我看了看，发现 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 + ")");
4

4 回答 4

52

更新 2018年 5 月 4 日：我的理解是 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 时，您正在设置固定大小，以便树必须符合该宽度和高度。当您设置 anodeSize时，树必须是动态的，因此它会重置树的大小。

当我在之后指定时size，nodeSize我几乎覆盖了我想要的哈哈......

底线：如果你想nodeSize工作，你不能有一个固定的树大小。它会将大小设置为null. size如果您要声明 a ，请不要声明 a nodeSize。

编辑：D3.js 实际上更新了文档。感谢这样做的人，因为现在更清楚了！

nodeSize 属性是 tree.size 独有的；设置 tree.nodeSize 将 tree.size 设置为 null。

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

nodeSize设置为宽100高30的图片

于 2013-07-11T22:34:56.880 回答
17

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

如果您正在使用.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

于 2017-02-03T21:21:02.853 回答
2

首先，感谢所有之前发布的人，纯金。我想为那些可能正在为与水平绘制的树相关的偏移问题而苦苦挣扎的人添加到这篇文章中。

关键是，如果你在水平树上从 .size() 切换到 .nodeSize()，你会注意到你的根节点似乎跳转/重定向到位于 (0,0) 处。根据 d3.js 文档，情况确实如此（请参阅https://github.com/d3/d3-hierarchy/blob/master/README.md#tree_nodeSize）

但是，要进行调整，您只需要确保重新定位您的viewBox. 也就是说，当你.append你svg需要明确设置你的viewBox. 这是我的hacky小线，它对我有用......

svg = d3.select("#tree").append("svg")
            .attr("width", width + margin.right + margin.left)
            .attr("height", height + 0 + 0)
            .attr("viewBox", "0 "+(-1*(height-margin.top-margin.bottom)/2)+" "+width+" "+height)
            .append("g")
            .attr("transform", "translate("
                  + margin.left + "," + 0 + ")");
于 2017-11-15T15:05:38.000 回答
-2

D3 现在通过Observable做事。

要设置 nodeSize查找行：

main.variable(observer("tree")).define("tree", ["d3","dx","dy"],
function(d3,dx,dy){return(
d3.tree()

并使用添加的常量设置 nodeSize：

main.variable(observer("tree")).define("tree", ["d3","dx","dy"],
function(d3,dx,dy){return(
d3.tree().nodeSize([dx + 10, dy + 10])

或者使用一个函数来设置图表大小的值，如其他答案中所讨论的，使用较旧的 D3 方法。

于 2019-07-31T18:08:07.107 回答