来自 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/
最佳答案
假设我正确理解您的问题,您可以通过每个节点的“标准化深度”来实现此目的。
nodes.forEach(function(d) { d.y = d.depth * 100; });
只需将其添加到您的评论附近 //计算“布局”
并使用值 100 以获得您想要的方式。
编辑:您还可以使用 var width
设置树的大小,然后更改 { d.y = d.depth * 100; }
到 { d.y = d.深度 * 宽度/someNumber; }
使其依赖于整个树的大小
关于javascript - D3.js 具有有限缩进的固定宽度树,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38359067/