D3 Examples - D3js simple grouping

xxxxxxxxxx
 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
    <title>D3 grouping</title>  
    <script src="https://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>
​
    