Pradeep Pradeep - 1 month ago 4
jQuery Question

D3 js collapsible chart increasing the arc curve radius

I am new to D3js. I am displaying the json in collapsible tree. The tree is displaying fine but the lines connecting the nodes are mostly straight. How to control the radius of the arc connecting the nodes? Please let me know how to do this in d3js.

The json data that needs to be plotted on d3

var treeData = JSON.parse('{"name":"pradeep","age":40,
"children": [{
"name": "naveen",
"description": 20,
"children": [{
"name": "interest",
"description": "displays the hobbies list",
"hobby": "S",
"hobby_name": "singinh"
}, {
"name": "profession",
"description": "describes the profession",
"profession": "blogger",
"salary": 20000,
"children": [{
"name": "cars",
"description": "car collections",
"children": [{
"name": "car-collections",
"description": "collections of cars",
"car_name": "audi",
"car_number": "8080"

Attached in the working plunker link - Plunker


The vertical separation is set by a magic number in your code, there is even a comment on it:

var newHeight = d3.max(levelWidth) * 25; // 25 pixels per line

You can tweak this value or create a dynamic rule for it.

Here is your plunker using 200: