javascript - 增加 d3 可折叠树上线/节点之间的空间

Question

我想自定义我的 d3 图表 collapsible tree

如果您需要源代码，这里是 D3 示例:https://bl.ocks.org/mbostock/4339083

我想在所有线/节点之间留出更多空间。

<rect><text>MyText in a Rectangle</text></rect> 

如何使用 css 轻松实现这一目标？

最佳

Answer 1

它是 SVG 图片而不是常规的 HTML DOM 元素。所以我不确定如何使用简单的 CSS 来修复它。

但我发现一个更简单的解决方案是只访问创建的 d3.layout.tree 对象的分离属性 . 在您的代码笔示例的第 126 行，您只需更改:

    .separation(function(a, b) { return (a.parent == b.parent ? 1 : 10) / a.depth; });

到

.separation(function(a, b) { return (a.parent == b.parent ? 1 : 5) / a.depth; });