Question

我对d3.js有疑问我运行了这个基本示例：http://i.imgur.com/DxPHuAC.png 和基本的json格式：

0.3.1

我的javascript代码在这里：

{
  "name": "root",
  "children": [
    {
     "name": "parent A",
     "children": [
       {"name": "child A1"},
       {"name": "child A2"},
       {"name": "child A3"}
     ]
    },{
     "name": "parent B",
     "children": [
       {"name": "child B1"},
       {"name": "child B2"}
     ]
    }
  ]
}

但问题是我查找了d3文档但不太好，所以我想把每个节点放在树的不同高度：http://i.imgur.com/VoaCqpX.png

Answer 1

要实现此目的，您可以使用递归函数下降树并修改每个子节点的y属性，每次循环遍历子节点集时都会修改修改量。

在创建节点之后但在创建链接之前，您将需要一些修改功能：

  var nodes = cluster.nodes(root).reverse();
  create_offset(nodes[0]);
  var links = cluster.links(nodes);

创建偏移的功能可能如下所示：

  function create_offset(node){
    if(node.children){
      //modify the y values of each child. increasing the offset each time
      var offset = 0;
      for(var i = 0; i<node.children.length;i++){
        node.children[i].y = node.children[i].depth * 100 + offset;
        offset += 20; //change this to change the degree of offset
      }

      //check each child to see if it has it's own children. If so, decend the tree recursively
      for(var i = 0; i<node.children.length;i++){
        if(node.children[i].children){
          create_offset(node.children[i]);
        }
      }    
    }
  }

注意：请确保nodes[0]中的create_offset(nodes[0]);是根节点。我很确定会是，但你应该仔细检查

簇树状图中节点的不同高度d3.js

1 个答案: