D3 Examples - scatter inner nodes ordering 2

xxxxxxxxxx
 
<!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
}]]
​
var calcdata3 = [[{
  trace: {
    mode: 'markers'
  },
  x: 1,
  y: 0
}, {
    x: 2,
  y: 1
}]];
      
plot('data0', calcdata0);
plot('data1', calcdata1);
plot('data2', calcdata2);
      
plot('update', calcdata0);
plot('update', calcdata1);
   
    </script>
  </body>
</html>
​
    