denisemauldin/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    Built with blockbuilder.org
forked from denisemauldin's block: nested text

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