D3 Examples - nested svg text with for-loop fork

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    .container { width: 500px; height: 500px;}
  </style>
</head>
​
<body>
   <svg class="container"></svg>
  <script>
    function makeNestedListItems(parentLists, yInc) {
      
    console.log("starting makeNestedListITems with", parentLists)
    
    var container = parentLists.append('g');
      
    var item = container.append('text')
        .text(function (d) {
          if ('key' in d) {
            return d.key;
          } else {
            console.log("ELSE!")
          return d.name;
          }
        })
        .attr("x", 30)
//         .attr("y", function(d, i) {
//             console.log("d in y", d, i, yInc);
//             return 100+i*yInc+yInc/2;
//          });
        .attr("y",function(d,i) {
          console.log(data_lowest, d);
            var y_sum = 50,
          output = 0;
          for (let f=0; f < i; f++) {
              for (var j=0; j < data_lowest[f].values.length-1; j++) {
              console.log("data_lowest:", data_lowest[f]);
              if (length in data_lowest[f].values[j].values || data_lowest[f].values[j].values.length > 1) {
                console.log(data_lowest[f].values ,"FOR:", i, f, j, y_sum);
                output += data_lowest[f].values[j].values.length;
              }
            }
                y_sum += (data_lowest[f].values.length+output)*20;
          }
          return y_sum;
        });
      
    var values = container.selectAll('.values')
        .data(function (d) {
            if ('values' in d) {
                console.log("children is getting",d.values);
                return d.values;
            } else {
              return d;
            }
        })
      .enter();
      
//       console.log(children)
//     var childX = xInc + 40;
​
    var childY = yInc + 40;
    
      
    console.log("values",values)
    
    if ('values' in values && !values.empty()) {
      console.log("Values in values!!!")
        makeNestedListItems(values, childY);
    }
}
    
    var data_lowest = [
            {key:"Key1", values:[
        {key:"Key1.1", values: [{count:5,total:4564,name:"abc1"}]}]},
            {key:"Key2",
           values: [
                    {key:"Key2.1", values:[{count:2,total:79,name:"abc2.1"}]},
                    {key:"Key2.2", values:[{count:4,total:33,name:"abc2.2"}]},
            ]
      },
            {key:"Key3", values:[{count:1, total:33,name:"abc3"}]},
            {key:"Key4", values:
        [{key:"Key 4.1", values:[{count:55,total:96, name:"abc4.1"}]}]
      }
        ]; 
    console.log(data_lowest)
​
var g = d3.select('svg').append('g').attr("class", "parent");
​
var rootList = g.selectAll('.items').data(data_lowest)
        .enter().append('g').attr('class', 'items');
makeNestedListItems(rootList, 40);
​
  </script>
 
</body>
​
    