javascript - D3.js 具有有限缩进的固定宽度树

Question

来自 d3.js 示例 http://bl.ocks.org/mbostock/1093025

我想使用tree.size来指定树的宽度，但我发现子级的默认缩进太大。正如文档中提到的，[如果我使用tree.nodeSize，它将取消tree.size的效果][1]:“nodeSize属性与tree.size互斥；设置tree.nodeSize将tree.size设置为null。”

var tree = d3.layout.tree()
//.nodeSize([1, 20]);
.size([10, 300]);

为了清楚起见，我创建了一个自定义 jsfiddle: http://jsfiddle.net/orrw9p1k/1/

您可以看到第一个 child 位于右侧。我希望它距离左侧最大值大约 20 像素，但当我部署“分析”节点时，我也不希望树能够生长超过其宽度。

有什么办法可以两全其美吗？

更新:这是一个工作示例: http://jsfiddle.net/mneom9bf/

Answer 1

假设我正确理解您的问题，您可以通过每个节点的“标准化深度”来实现此目的。

nodes.forEach(function(d) { d.y = d.depth * 100; });

只需将其添加到您的评论附近 //计算“布局” 并使用值 100 以获得您想要的方式。

编辑:您还可以使用 var width 设置树的大小，然后更改 { d.y = d.depth * 100; } 到 { d.y = d.深度 * 宽度/someNumber; } 使其依赖于整个树的大小