Buttons, Dropdowns by kcsluis

index.html

<!DOCTYPE html>

<head>
	<meta charset="utf-8">
	<title></title>
	<style type="text/css">

	/*css*/

	</style>
</head>

<body>

	<!-- html -->
	<select></select>

</body>


<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js" charset="utf-8"></script>
<script>

// key interaction
window.onkeyup = function(e) {
	var key = e.keyCode ? e.keyCode : e.which;
	if (key == 39) {
		console.log('Right');
	} else if (key == 37) {
		console.log('Left');
	} else if (key == 38) {
		console.log('Up');
	} else if (key == 40) {
		console.log('Down');
	};
};

// buttons w data join
var buttons = d3.select("body").selectAll(".controller-button")
	.data(["I", "II", "III", "IV"])
	.enter()
	.append("button")
	.attr("class", "controller-button")
	.text(function(d) { return "Group " + d; })
	.on("click", function(d) {
		console.log('Button pressed')
	});

// dropdown menu
d3.select("select").selectAll("option")
	.data(['A','B','C','D'])
	.enter()
	.append("option")
	.text( function (d) { return d; });
// the event listener has to be associated with the select, not the option
d3.select('select')
	.on('change', function (d) { console.log(this.value); });

</script>