CODEWITHSUNDEEP
javascriptjqueryjsond3.js
zilcuanu
zilcuanu

Reputation: 3715

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

Upvotes: 0

Views: 136

Answers (1)

Gerardo Furtado
Gerardo Furtado

Reputation: 102174

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: http://plnkr.co/edit/lmy7R5S6fH3kF69VT9zS?p=preview

Upvotes: 1

Related Questions