c = html`
<div id="root">
<p id="sub1">
<a id="a1"></a>
<a id="a2"></a>
</p>
<p id="sub2"></p>
</div>
`
d3.select(c).select("p").insert("div", () => document.getElementById("a2")); // add a div before anchor with id "a2"
d3.select(c).select("div").attr("id", "d1") // set the div with id "d1"
d3.select(c).select("p").insert("a"); // insert/append an anchor to the last child of p
d3.select(c).select("#sub2").insert(() => document.createElement("div"));
d3.select(c).select("#sub2").select("div").attr("id", "d2")
d3.select("#sub2").select(function() {
return this.insertBefore(document.createElement("a"), document.getElementById("d2")); // added an anchor before div id="d2"
});
import {d3} from "@embracelife/tutorial-utilities"
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
