Built with blockbuilder.org
forked from aitee's block: Inserting @ 0 causes issues with join-update
license: mit |
Built with blockbuilder.org
forked from aitee's block: Inserting @ 0 causes issues with join-update
<!DOCTYPE html> | |
<head> | |
<meta charset="utf-8"> | |
<script src="https://d3js.org/d3.v5.min.js"></script> | |
<style> | |
body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; } | |
</style> | |
</head> | |
<body> | |
<script> | |
var width = 900; | |
var svg = d3.select("body").append("svg") | |
.attr("width", width) | |
.attr("height", 33) | |
.attr("viewBox", `0 -20 ${width} 33`); | |
function update(data){ | |
svg.selectAll("text") | |
.data(data, d=>d) | |
.join( | |
onCreate => onCreate.append("text") // enter | |
// Can't solely put it here as text needs to be on update as well | |
// (otherwise the values aren't updated and assumes the values in those positions are unchanged.) | |
//.text(d => d) | |
.attr("fill", "green"), | |
onUpdate => onUpdate // update | |
.attr("fill", "black"), | |
onRemove => onRemove.remove() // exit | |
) | |
// We can put things common to enter and update. | |
.text(d => d) | |
.attr("font-size", "24") | |
.attr("font-weight", "bold") | |
.attr("x", (d, i) => i * 50); | |
} | |
update(["1", "2", "3"]); // Expect, all green | |
update(["-1", "0", "1", "2", "3"]); // Expect 0, 1 green followed by 1, 2, 3 black. | |
</script> | |
</body> |