scatter inner nodes ordering

forked from etpinard's block: trace struct flattener

<!DOCTYPE html>
<html>
  <head>    
    <style>
      .row {
         display: flex;
      }
      .col {
        flex: 1;
  			padding: 1em;
      }
    </style>
    <script type="text/javascript" src="https:/cdn.plot.ly/plotly-latest.min.js"></script>
  </head>
  <body>
		<div class="row">
    	<div id="data0" class="col"></div>
    	<div id="data1" class="col"></div>
      <div id="data2" class="col"></div>
      <div id="update" class="col"></div>
    </div>
      
		<script type="text/javascript">   
var d3 = Plotly.d3;
      
function plot(id, data) {
  var divTrace = d3.select('#' + id).data(data);
  
  divTrace.enter().append('div')
  	.classed('trace', true);
  
  divTrace.exit().remove();
  
  // quick and dirty way
  //divTrace.selectAll('*').remove();
  
  divTrace.each(function(pts) {
    var s = d3.select(this);
    
    var lines = s.selectAll('p.lines')
    	.data(hasLines(pts) ? 
      	[{
       	 	order: 0,  // to reorder inner nodes
        	path: makeLine(pts)
      	}] :
        []);
    
    lines.enter().append('p')
    	.classed('lines', true);
    
    lines.text(function(d) { return d.path; });
    
    lines.exit().remove();
  
    var markers = s.selectAll('p.markers')
    	.data(hasMarkers(pts) ? pts: []);
    
    markers.enter().append('p')
    	.classed('markers', true);
        
    markers.each(function(pt) {
      pt.order = 1;  // to reorder inner nodes
    });
    
    markers.text(function(d) {
      return 'marker: (' + d.x + ',' + d.y + ')';
    });
    
    markers.exit().remove();
  });
   
  // reorder the inner nodes using 'type'
  divTrace.selectAll('*').sort(function(a, b) {
    return a.order - b.order;
  });
}
      
function hasLines(pts) {
  return pts[0].trace.mode.indexOf('lines') !== -1;
}
     
function hasMarkers(pts) {
  return pts[0].trace.mode.indexOf('markers') !== -1;
}
      
function makeLine(pts) {
	return 'line: ' + pts.map(function(pt) {
  	return '(' + pt.x + ',' + pt.y + ')';
   }).join('-');
}
     
var calcdata0 = [[{
  trace: {
    mode: 'markers'
  },
  x: 0,
  y: 1
}, {
	x: 1,
  y: 2
}, { 
  x: 2,
  y: 3
}]];

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