drewbo
5/8/2014 - 7:21 PM

A Pen by Drew.

A Pen by Drew.

style.css
content_copyfile_download
body {
  background-color: lightgray;
}
script.js
content_copyfile_download
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"));}
}
index.html
content_copyfile_download
<body>
  <select multiple size=5 id="menu"></select>
  <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
</body>
Select-Multiple.markdown
content_copyfile_download
  • Rendered
  • Source

Select Multiple

experimenting with multiple selections

A Pen by Drew on CodePen.

License.