svg - svg が階層構造に従うようにする

Question

私はd3が初めてで、svgをツリーの階層構造に従わせることができるかどうか疑問に思っていました。

そのようなjsonがあるとしましょう:

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

このような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>

私はそのようなものを試しました:

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

そして、ルートノードの子のタグを取得していますが、子の子に対してネストされたグループを再帰的に作成する方法がわかりません。

誰にもアイデアがありますか？

ありがとう、

レム