nested svg text with for-loop

forked from denisemauldin's block: nested text

forked from denisemauldin's block: nested svg text

<!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) { return d.key; })
        .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 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>

https://d3js.org/d3.v4.min.js