title: Json d3 access each object
body: <pre><code>{
   "name": "Max",
   "value": 107,
   "children": [
    {
     "name": "Don",
     "value": 60,
     "children" [
       {"name": "CC", "value": 25},
       {"name": "Jim", "value": 35}
       ]
       },
    {
     "name": "David",
     "value": 47,
     "children": [
         {"name": "Jeff", "value": 32},
         {"name": "Buffy", "value": 15}
      ]
     }
    ]
   }
  </code></pre>
  
  <p>How can I access the inner most child name with d3? </p>
  
  <p>I tried doing :</p>
  
  <blockquote>
    <p>.text(function (d) { return d.children ? null : d.name; }); <br/></p>
  </blockquote>
  
  <p>But it didn't work....</p>
  
  <p>When I do</p>
  
  <blockquote>
    <p>.text(function (d) { return d.name }); <br/></p>
  </blockquote>
  
  <p>it only shows the name of the outer loop --> Don, David.</p>
  
  <pre><code>d3.json('flare.json', function (data) {
  
    var canvas = d3.select('p1')
               .append('svg')
               .attr('width', 800)
               .attr('height', 800)
  
    var color = d3.scale.category20c();
  
    var data1 = data.children;
  
    canvas.selectAll('text')
                .data(data1)
                .enter()
                .append('text')
                   .attr('x', function (d) { return 2; })
                   .attr('y', function (d, i) { return i * 15; })
                   .attr('fill', 'black')
                   .style('font-size', '12px')
                   .text(function (d) { return d.children ? null: d.name; })
  </code></pre>
  
  <p>Data I had before ↓ ↓</p>
  
  <pre><code>{
  "name": "Don",
  "value": 75,
  "children" [
             {"name": "CC", "value": 25},
             {"name": "Jim", "value": 35}
     ]
  }
  </code></pre>
  
  <p>When the data was in this single nested format, my code worked perfectly, but when I did double nest on it, it no longer works</p>