widged/index.html

## readme.md

      
    Raw
  

              readme.md
            
          
    answer for
http://stackoverflow.com/questions/15518095/appending-a-different-number-of-elements-to-each-group
Interactive version
http://bl.ocks.org/widged/5203275

  
## index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
    <title>D3 grouping</title>
    <script src="http://d3js.org/d3.v2.min.js"></script>
</head>

<body>
    <style type="text/css">
      div.group {
        background-color: blue;
        color: white;
        margin: 20px;
        padding: 9px;
      }
      div.node {
        background-color: orange;
        margin: 3px;
      }
	</style>

    <div id='viz'></div>
    <script>
     var data = [
            [1,2,3],
            [1,2,3,4],
            [1,2,3,4,5]
           ];


     var viz = d3.select("#viz");
     var groups = viz.selectAll("div.group")
                     .data(data, function(d, index) {
                        return d.key;
                     })
                     .enter()
                     .append("div")
                     .classed('group', true)
                     .text(function(d, i) { return 'group ' + i});

      var nodes = groups
                     .selectAll("div.node")
					 .data(function(d, index){
                       console.log("d",d);
                        return d;
                     })
                     .enter().append("div")
                     .classed('node', true)
                     .text(function(d, i) { return d});
  </script>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>D3 grouping</title>
	<script src="http://d3js.org/d3.v2.min.js"></script>
	</head>

	<body>
	<style type="text/css">
	div.group {
	background-color: blue;
	color: white;
	margin: 20px;
	padding: 9px;
	}
	div.node {
	background-color: orange;
	margin: 3px;
	}
	</style>

	<div id='viz'></div>
	<script>
	var data = [
	[1,2,3],
	[1,2,3,4],
	[1,2,3,4,5]
	];


	var viz = d3.select("#viz");
	var groups = viz.selectAll("div.group")
	.data(data, function(d, index) {
	return d.key;
	})
	.enter()
	.append("div")
	.classed('group', true)
	.text(function(d, i) { return 'group ' + i});

	var nodes = groups
	.selectAll("div.node")
	.data(function(d, index){
	console.log("d",d);
	return d;
	})
	.enter().append("div")
	.classed('node', true)
	.text(function(d, i) { return d});
	</script>