selection.order playgroud

forked from mbostock's block: selection.order

forked from anonymous's block: selection.order().exit().remove()

More info here: https://github.com/mbostock/d3/wiki/Selections#sort

forked from etpinard's block: selection.order().exit().remove()

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

https:/cdn.plot.ly/plotly-latest.min.js