forked from mbostock's block: selection.order
forked from anonymous's block: selection.order().exit().remove()
selection.order().exit().remove( |
forked from mbostock's block: selection.order
forked from anonymous's block: selection.order().exit().remove()
<!DOCTYPE html> | |
<html> | |
<body> | |
<div id='graph'></div> | |
<script type="text/javascript" src="https:/cdn.plot.ly/plotly-latest.min.js"></script> | |
<script type="text/javascript"> | |
var d3 = Plotly.d3; | |
var ORDER = ['heatmap', 'contour', 'bar', 'histogram', 'scatter']; | |
function plot(data) { | |
var s = d3.select('#graph').selectAll('p') | |
.data(data, function(d) { return d.uid; }) | |
s.enter().append('p'); | |
s.sort(function(a, b) { | |
return ( | |
ORDER.indexOf(a.type) - ORDER.indexOf(b.type) | |
); | |
}); | |
s.exit().remove(); | |
s.text(function(d) { return d.type + ' ' + d.uid;} ); | |
} | |
var data0 = [{ | |
type: 'scatter', | |
uid: '0' | |
}, { | |
type: 'bar', | |
uid: '1' | |
}, { | |
type: 'heatmap', | |
uid: '2' | |
}, { | |
type: 'contour', | |
uid: '2.5' | |
}]; | |
plot(data0) | |
var data1 = [{ | |
type: 'scatter', | |
uid: '1' | |
}, { | |
type: 'bar', | |
uid: '0' | |
}, { | |
type: 'heatmap', | |
uid: '2' | |
}, { | |
type: 'contour', | |
uid: '3' | |
}]; | |
plot(data1); | |
</script> | |
</body> | |
</html> |