Skip to content

Instantly share code, notes, and snippets.

@drewbo

drewbo/Select-Multiple.markdown

Created May 8, 2014 19:21
Show Gist options
  • Save drewbo/8cb2122ced7e50f7b0e7 to your computer and use it in GitHub Desktop.
Save drewbo/8cb2122ced7e50f7b0e7 to your computer and use it in GitHub Desktop.
Download ZIP
A Pen by Drew.
Raw
index.html
<body>
<select multiple size=5 id="menu"></select>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
</body>
Raw
script.js
var dataset = [1,2,3,4,5,6,7,8,9,10];
var curSelection = [];
var menu = d3.select("select")
.on("change",change);
menu.selectAll("option")
.data(dataset)
.enter()
.append("option")
.text( function (d){return d});
var svg = d3.select("body").append("svg")
.attr("width",400)
.attr("height",400);
function change(){
curSelection = [];
d3.selectAll("option").each(sel);
svg.selectAll("text")
.data(curSelection, function key (d){ return d; })
.enter()
.append("text")
.attr("x",50)
.attr("y", function (d,i) { return i*25 + 50;})
.text(function (d){return d;});
svg.selectAll("text")
.data(curSelection, function key (d){ return d; })
.exit()
.remove();
};
function sel (d,i) {
if (d3.select(this).property("selected") == true){
curSelection.push( d3.select(this).property("value"));}
}
Raw
Select-Multiple.markdown
Raw
style.css
body {
background-color: lightgray;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment