使svg遵循分层结构

我是d3新手，我想知道是否有可能使svg遵循树的层次结构

假设我有这样一个json：

{
       "name": "root",
       "children": [
           {
               "name" : "child1",
               "children": [
                   {
                       "name": "child1_1"
                   },
                   {
                       "name": "child1_2"
                   }
               ]
           },
           {
               "name": "child2",
               "children": [
                   {
                  "name": "child2_1"
                   },
                   {
                       "name": "child2_2"
                   }
               ]
           }   
        ]
}

var w = 960,
    h = 2000,
    i = 0,
    root;

var diagonal = d3.svg.diagonal()
    .projection(function(d) { return [d.y, d.x]; });

var vis = d3.select("#chart").append("svg:svg")
    .attr("width", w)
    .attr("height", h)
    .append("svg:g")
    .attr("transform", "translate(40,0)");

d3.json(
    './small_tree.json',
    function(json) {
        json.x0 = 800;
        json.y0 = 0;
        update(root = json);
    }
);
function update(source) {

    var nodes = tree.nodes(root);
    var child = vis.selectAll('g.child_node')
        .data(nodes,function(d){return d.children;})
        .enter()
        .append('g')
        .attr("class", "child_node");
}

我如何拥有这样的svg结构：

<g class="root">
  <g class="child1">
    <g class="child1_1">
    </g>
    <g class="child1_2">
    </g>
  </g>
  <g class="child2">
    <g class="child2_1">
    </g>
    <g class="child2_2">
    </g>
  </g>
</g>

我得到了根节点的子节点的标记，但我不知道如何递归地为子节点的子节点创建嵌套组

有人有主意吗

谢谢

---

Rem

D3并不以本机方式处理递归，而且看起来标准分层布局一般不会创建嵌套结构。相反，您需要在自己的代码中递归。下面是一个实现：

// simple offset, just to make things visible
var offset = 0;

// recursion function
function addNode(selection, depth) {
   // set the current children as the data array
   var nodeGroup = selection.selectAll('g.child_node')
       .data(function(d) { return d.children })
     .enter()
       // add a node for each child
       .append('g')
       .attr("class", "child_node")
       // very simple depth-based placement
       .attr("transform", "translate(" + (depth * 30) + "," +
            (++offset * 15) + ")");

    nodeGroup.append("text")
       .attr("dy", "1em")
       .text(function(d) { return d.name });

    // recurse - there might be a way to ditch the conditional here
    nodeGroup.each(function(d) {
        if (d.children) nodeGroup.call(addNode, depth + 1);
    });
}

d3.json(
    './small_tree.json',
    function(root) {
        // kick off the recursive append
        vis
            .datum({ children: [root] })
            .call(addNode, 0);
    }
}

---

看小提琴：

你自己试过什么了吗？如果这只是一个“为我做”的问题，而不是“我对这段代码有问题，请帮我解决”的话，你不可能得到任何答案。对不起，我应该从这开始…非常感谢你的帮助！！你认为这样的组织在为一棵大树折叠子树时会有助于提高性能吗？我不确定。大多数D3树处理实际上使用了一个平面列表，并简单地将事物放置在分层布局中，而不是嵌套结构中——不确定哪一个性能更好。