CODEWITHSUNDEEP
javascriptcssd3.js
andrea06590
andrea06590

Reputation: 1299

Increase space between line/nodes on d3 collapsible tree

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

Upvotes: 0

Views: 965

Answers (1)

jg80
jg80

Reputation: 201

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; });

Upvotes: 3

Related Questions