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

Question

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

我想用tree.size来指定树的宽度，但是我发现children的默认缩进太大了。如文档中所述，[如果我使用 tree.nodeSize 它将取消 tree.size][1] 的效果："The nodeSize property is exclusive with tree.size; setting tree.nodeSize sets tree.size to null."

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

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

您可以看到第一个 child 在右边。我希望它距离左侧最大约 20 像素，但我不希望树在部署 'analytics' 节点时能够超过其宽度。

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

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

Answer 1

假设我正确理解你的问题，你可以通过 "normalizing depth" 为你的每个节点完成这个。

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

只需将其添加到您的评论附近 // Compute the "layout" 并使用值 100 来按照您想要的方式获得它。

编辑：您还可以使用 var width 设置树的大小，然后将 { d.y = d.depth * 100; } 更改为 { d.y = d.depth * width/someNumber; } 以使其取决于整体树的大小

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

D3.js fixed width tree with limited indentation

javascript

tree

d3.js