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

Question

I'd like to customize my d3 chart collapsible tree

Here is the D3 example if you need a source code : https://bl.ocks.org/mbostock/4339083

I want to have more space between all the lines/nodes .

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

How can I achieve this easily using css ?

Best

Answer 1

Its a SVG picture not a regular HTML DOM element. So I am not sure how to use simple CSS to fix it.

But I found an even simpler solution is to just access the separation property of the d3.layout.tree object that is created . On line 126 in your codepen example you just change from:

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

to

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