scatter inner nodes ordering 2

forked from etpinard's block: trace struct flattener

forked from etpinard's block: scatter inner nodes ordering

<!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;
  
// I believe this pattern is cleaner and less hacky than
// https://gist.github.com/etpinard/fb082e67cd821b4362ef
//
// Now, is it slower/faster? 
// Do the extra nested layers slow down interactions?     
      
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 modeData = [];
    if(hasLines(pts)) modeData.push('lines');
    if(hasMarkers(pts)) modeData.push('markers');
    
    var modes = s.selectAll('div.mode')
    	.data(modeData, function(d) { return d; });
    
    modes.enter().append('div')
    	.classed('mode', true);
    
    // VERY IMPORTANT mode divs are reordered
    modes.order();
    
    modes.exit().remove();
    
    modes.each(function(mode) {
      var s = d3.select(this);
      
      switch(mode) {
      case 'lines':
        var lines = s.selectAll('p.line')
        	.data([makeLine(pts)]);
        
        lines.enter().append('p')
        	.classed('line', true);
        
        lines.text(function(d) { return d; });
        
        lines.exit().remove();
      	break;
      
      case 'markers':
      	var markers = s.selectAll('p.marker')
    			.data(pts);
    
    		markers.enter().append('p')
    			.classed('marker', true);
        
        markers.text(function(d) {
      		return 'marker: (' + d.x + ',' + d.y + ')';
    		});
        
        markers.exit().remove()
        break;
      }
    });    
  });
}
      
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
}]];

var calcdata1 = [[{
  trace: {
    mode: 'markers+lines'
  },
  x: 1,
  y: 0
}, {
	x: 2,
  y: 1
}]];
      
var calcdata2 = [[{
    trace: {
    mode: 'lines'
  },
  x: 0,
  y: 0
}, {
	x: 1,
  y: 1
}, { 
  x: 2,
  y: 2
}]]

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