nested svg text by denisemauldin

index.html

<!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, xInc, 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", function(d,i) {
          return 100+i*xInc;
        })
        .attr("y", function(d, i) {
            console.log("d in y", d, i, xInc, yInc);
            return 100+i*yInc;
        });
      
    var children = container.selectAll('.children')
        .data(function (d) {
            console.log("children is getting",d.children)
            return d.children
        })
      .enter();
      console.log(children)
    var childX = xInc + 20;
    var childY = yInc + 20;
    console.log("children",children)
    if (children && !children.empty()) {
        makeNestedListItems(children, childX, childY);
    }
}
    
    var data_lowest = [
			{key:"Key1", values:["1a","1b","1c"], "children": []},
			{key:"Key2", values:["2a","2b","2c"], 
           "children": [
      				{key:"Key21", values:["21a","21b","21c"], "children": []},
       				{key:"Key22", values:["22a","22b","22c"], "children": []},
         ]
      },
			{key:"Key3", values:["3a","3b","3c"], "children": []},
			{key:"Key4", values:["4a","4b","4c"], 
        "children": [
            {key:"Key41", values:["41a","41b","41c"], "children": []}
        ]
      }
		]; 
    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, 20, 20);

  </script>
 
</body>