D3 Examples - selection.order playgroud

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
  <body>
    <script type="text/javascript" src="https:/cdn.plot.ly/plotly-latest.min.js"></script>
    <script type="text/javascript">
      
var d3 = Plotly.d3;
      
var columnData = [{
  name: 'Base', 
  action: function() {}
}, {
    name: 'Sort',
  action: function(div) {
    div.sort();
  }
}, {
  name: 'Order',
  action: function(div) {
    div.order();
  }
}, {
  name: 'Exit / Remove',
  action: function(div) {
    div.exit().remove();
  }
}
];
    
var contianer = d3.select('body').append('div')
    .attr('id', 'container')
        .style('column-count', 6);
 
var cols = d3.select(container).selectAll('cols')
    .data(columnData)
    .enter().append('div');
            
​
cols.each(function(col) {
  console
  var div = d3.select(this).call(setupColumn);
  
  col.action(div);
})
      
​
      
      
function setupColumn(col, data0, data1) {
  var div = col.selectAll('div')
        .data(data0)
    .enter().append('div')
        .text(String);
  
  var div = d3.select('body').selectAll('div')
        .data(data1, String);
   
    div.enter().append('div')
        .text(String);
  
  return div;
}
      
      
​
​
​
​
​
​
​
//                                  => 0 10 11 4  6  12 1 2
// div.exit().remove();          // => 0 10 11 12 1  2
// div.sort()                    // => 4 6  0  1  2  10 11 12
// div.order()                   // => 0 1  2  10 11 12 4 6
// div.sort().exit().remove();   // => 0 1  2  10 11 12
// div.order().exit().remove();  // => 0 1  2  10 11 12
      
div.sort().exit().remove();
​
    </script>
  </body>
</html>
​
    