Selectable elements

Provide selection capabilities for DOM elements, geared to <select multiple>.

click: select element
ctrl + click: add element to current selection
click + move: select elements while dragging
ctrl + a: select all elements within focused list
ctrl + shift + a: deselect all elements within focused list
ctrl + click + move: toggle selection while dragging
shift + click: select range from nearest last selected element to clicked element
shift + ctrl + click: add range to current selection
shift + click between selected elements: select all between first and last selected element
home: select first element
ctrl + home: add first element to selection
end: select last element
ctrl + end: add last element to selection
up: select element before first selected element
ctrl + up: add element before first selected element to selection
down: select element after last selected element
ctrl + down: add element after last selected element to selection

<!DOCTYPE html>
<html lang=de>
<style>

body {
  font: 13px sans-serif;
}
ul, table {
  display: inline-block;
  margin: 0 3em 3ex 0;
  vertical-align: top;
}
ul {
  padding: 0;
  list-style-type: none;
}
table {
  border-collapse: collapse;
}
li, th, td, text {
  padding: 1ex 1em;
  cursor: default;
  -webkit-user-select: none;
}
th {
  text-align: left;
}
.selected {
  background-color: #84a9d7;
  color: white;
}
text.selected {
  font-weight: bold;
}

</style>
<body>
  
<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="d3.selectable.js"></script>
<script>

var groups = [
  [
    { "name": "Black Russian" },
    { "name": "Bloody Mary" },
    { "name": "Gin Fizz" },
    { "name": "Gin Tonic" },
    { "name": "Grasshopper" },
    { "name": "Mai Tai", "_selected": true },
    { "name": "Margarita" },
    { "name": "Martini" },
    { "name": "Mojito" },
    { "name": "Pina Colada" },
    { "name": "Ruby Relaxer" },
    { "name": "Sex On The Beach" },
    { "name": "Tequila Sunrise" },
    { "name": "White Russian" }
  ],
  [
    { "name": "Anselm" },
    { "name": "Bernd" },
    { "name": "Elvis" },
    { "name": "Eva" },
    { "name": "Godot" },
    { "name": "Jutta" }
  ]
];

// create lists
var ul = d3.select('body').selectAll('ul')
  .data(groups)
.enter()
  .append('ul')
  .attr('tabindex', 1); // enable focus
  
var li = ul.selectAll('li')
    .data(function(d) { return d; })
  .enter()
    .append('li')
    .classed('selected', function(d) { return d._selected; })
    .text(function(d) { return d.name; });

// create table
var table = d3.select('body').selectAll('table')
  .data([groups[0]])
.enter()
  .append('table')
  .attr('tabindex', 1); // enable focus

var tr = table.append('tr');
tr.append('th').text('ID');
tr.append('th').text('Name');
  
tr = table.selectAll('tr')
    .data(function(d) { return d; })
  .enter()
    .append('tr')
    .classed('selected', function(d) { return d._selected; })

tr.append('td').text(function(d, i) { return i; });
tr.append('td').text(function(d) { return d.name; });

// create svg
var svg = d3.select('body').selectAll('svg')
  .data([groups[1]])
.enter()
  .append('svg')
  .attr("width", 400)
  .attr("height", 400);

circle = svg.selectAll('circle')
    .data(function(d) { return d; })
  .enter()
    .append('g')
      .append('text')
      .attr('x', function() { return 20 + Math.random() * 360; })
      .attr('y', function() { return 20 + Math.random() * 360; })
      .text(function(d) { return d.name; })
      .classed('selected', function(d) { return d._selected; })

d3.selectable(ul, li, update);
d3.selectable(table, tr, update);
d3.selectable(svg, circle, update);

</script>

Modified http://d3js.org/d3.v3.min.js to a secure url

https://d3js.org/d3.v3.min.js