horizontalNav = function(itemData, options = {label:"horizontal-nav", format: d => d}) {
const ul = d3.create("ul").attr("id", options.label || "horizontal-nav"+Math.ceil(Math.random()*100), options.format || (d => d))
.attr("class", "horizontal-nav")
const items = ul.selectAll("li")
.data(itemData)
.join(enter => enter
.append("li").attr("class", "nav-item")
.append("a")
.attr("href", "#"+options.label)
.text(options.format),
update => update,
exit => exit.remove())
.on("mousedown", function(event) {
const selection = d3.select(this.parentNode)
selection.classed("active", true)
})
.on("mouseup", function(event) {
const items = d3.selectAll(".nav-item")
const selected = d3.select(this.parentNode)
items.each(function(text) {
const item = d3.select(this)
console.log(selected, item)
item.classed("active", selected.node() == item.node() )
})
})
.on("click", function(event) {
const selection = d3.select(this)
ul.node().value = selection.datum()
ul.node().dispatchEvent(new Event("input", {bubbles: true}));
})
ul.node().value = options.value || items.data()[0]
return ul.node()
}