#data-driven dropdown
A simple d3js component that generates html <select></select>
and <option></option>
elements from data.
Sharing this in hopes that seeing the pattern in isolation with simple data makes it easier to add this functionality to your d3js project.
forked from micahstubbs's block: data-driven dropdown
xxxxxxxxxx
<html>
<head>
<script src="https://d3js.org/d3.v2.js"></script>
<style>
select { position: absolute; left: 50px; top: 50px; }
p { position: absolute; left: 280px; top: 32px; }
</style>
</head>
<body>
<script type="text/javascript">
// specify a format function we'll use later
// https://github.com/mbostock/d3/wiki/Formatting
var comma = d3.format(",");
d3.json("cities.json", function(data) {
// create the drop down menu of cities
var selector = d3.select("body")
.append("select")
.attr("id", "cityselector")
.selectAll("option")
.data(data)
.enter().append("option")
.text(function(d) { return d.city; })
.attr("value", function (d, i) {
return i;
});
// generate a random index value and set the selector to the city
// at that index value in the data array
var index = Math.round(Math.random() * data.length);
d3.select("#cityselector").property("selectedIndex", index);
// append a paragraph tag to the body that shows the city name and it's population
d3.select("body")
.append("p")
.data(data)
.text(function(d){
return data[index]['city'] + " - population " + comma(data[index]['population']);
})
// when the user selects a city, set the value of the index variable
// and call the update(); function
d3.select("#cityselector")
.on("change", function(d) {
index = this.value;
update();
})
// update the paragraph text to match the selection made by the user
function update(){
d3.selectAll("p")
.data(data)
.text(function(d){
return data[index]['city'] + " - population " + comma(data[index]['population']);
})
}
})
</script>
</body>
</html>
https://d3js.org/d3.v2.js