Provide selection capabilities for DOM elements, geared to <select multiple>.
click: select elementctrl + click: add element to current selectionclick + move: select elements while draggingctrl + a: select all elements within focused listctrl + shift + a: deselect all elements within focused listctrl + click + move: toggle selection while draggingshift + click: select range from nearest last selected element to clicked elementshift + ctrl + click: add range to current selectionshift + click between selected elements: select all between first and last selected elementhome: select first elementctrl + home: add first element to selectionend: select last elementctrl + end: add last element to selectionup: select element before first selected elementctrl + up: add element before first selected element to selectiondown: select element after last selected elementctrl + down: add element after last selected element to selectionxxxxxxxxxx<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="../d3.js"></script> --><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 listsvar 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 tablevar table = d3.select('body').selectAll('table') .data([groups[0]]).enter() .append('table') .attr('tabindex', 1); // enable focusvar 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 svgvar 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; })function update() { ul.selectAll('li') .classed('selected', function(d) { return d._selected; }) table.selectAll('tr') .classed('selected', function(d) { return d._selected; }) svg.selectAll('text') .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