d3.js - Make the svg follow a hierarchical structure -

i'm new d3 , wondering if possible make svg follow hierarchical structure of tree.

let's have json :

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

how can have svg structure :

<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> 

i've tried stuff :

var w = 960,     h = 2000,     = 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"); } 

and i'm getting tag children of root node, don't know how recursively create nested group children of children.

anyone have idea ?

thanks,

rem

d3 doesn't natively handle recursion, , looks standard hierarchical layouts don't, in general, create nested structures. instead, need recurse in own code. here's 1 implementation:

// simple offset, make things visible var offset = 0;  // recursion function function addnode(selection, depth) {    // set current children data array    var nodegroup = selection.selectall('g.child_node')        .data(function(d) { return d.children })      .enter()        // add node each child        .append('g')        .attr("class", "child_node")        // 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 way ditch conditional here     nodegroup.each(function(d) {         if (d.children) nodegroup.call(addnode, depth + 1);     }); }  d3.json(     './small_tree.json',     function(root) {         // kick off recursive append         vis             .datum({ children: [root] })             .call(addnode, 0);     } } 

see fiddle: http://jsfiddle.net/nrabinowitz/elywa/