2016-09-14 3 views
0

D3jsを初めて使用しています。私は折り畳み可能な木の中にjsonを表示しています。ツリーはうまく表示されていますが、ノードを結ぶ線はほとんど直線です。どのようにノードを接続する円弧の半径を制御するには? d3jsでこれを行う方法を教えてください。D3 js折りたたみ可能なグラフアークカーブ半径を増やす

作業plunkerリンクに添付

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" 
        }] 
       }] 
      }] 
     }] 
    }'); 

D3上にプロットする必要のあるJSONデータ - Plunker

+0

あなたが "ほとんどストレート" とはどういう意味ですか?あなたは "関心"と "職業"の間の垂直分離を増やしたいのですが、それは問題ですか? –

+0

@GerardoFurtadoはい。どの属性がこの属性の原因です。 – zilcuanu

答えて

1

垂直分離は、あなたのコード内のマジックナンバーで設定されているが、でもそこにありますコメント:

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

この値を微調整したり、動的ルールを作成したりできます。ここで

200を使用してplunkerです:http://plnkr.co/edit/lmy7R5S6fH3kF69VT9zS?p=preview

+0

これは良い見ています。どのようにノード間の長さを減らすには? – zilcuanu

+0

コメントには質問しないでください。 StackOverflowでは、特定のコード問題を扱いますが、問題ごとに1つの問題があります。 –

+0

ノード間の長さを短くする質問を投稿しました。同じリンクを見つけてください - http://stackoverflow.com/questions/39508522/d3js-collapsible-tree-decreasing-the-length-between-nodes – zilcuanu

関連する問題