D3 js可折叠图表增加了圆弧曲线的半径 [英] D3 js collapsible chart increasing the arc curve radius

问题描述

我是D3js的新手.我在可折叠树中显示json.树显示的很好，但是连接节点的线大部分是直的.如何控制连接节点的圆弧的半径?请让我知道如何在d3js中执行此操作.

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.

需要在d3上绘制的json数据

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.

这是您使用200的放屁者: http://plnkr.co/edit/lmy7R5S6fH3kF69VT9zS ?p =预览

Here is your plunker using 200: http://plnkr.co/edit/lmy7R5S6fH3kF69VT9zS?p=preview

这篇关于D3 js可折叠图表增加了圆弧曲线的半径的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！