This document provides information on how to add buttons with d3.js. It is composed by several interactive examples, allowing to play with the code to understand better how it works.
html with onclick().html, and an onclick attribute is added.changeColor() function.onclick is not the only method, try also onchange, onmouseover, and more. See more here<!DOCTYPE html>
<meta charset="utf-8">
<!-- Load d3.js -->
<script src="https://d3js.org/d3.v4.js"></script>
<!-- Add 2 buttons-->
<button type="button" onclick="changeColor('blue')">Blue</button>
<button type="button" onclick="changeColor('red')">Red</button>
<!-- Create a div where the circle will take place -->
<div id="dataviz_buttonTriger"></div>
<script>
// Initialize a circle
var myCircle = d3.select("#dataviz_buttonTriger")
.append("svg")
.append("circle")
.attr("cx", 100)
.attr("cy", 70)
.attr("r", 50)
.attr("stroke", "black")
// A function that update the color circle
var changeColor = function(color){
myCircle
.style("fill", color)
}
</script> javascripthtml, but is made active thanks to javascript.id and an event listener is setup: .on("input", changeSize ). Each type the input of the button changes, the changeSize function is triggered.input to listen to a numeric input button. But listen to change for a dropdown button. This is a bit tricky and a small example of each type is provided in the application part of this document.<!DOCTYPE html>
<meta charset="utf-8">
<!-- Load d3.js -->
<script src="https://d3js.org/d3.v4.js"></script>
<!-- Add button-->
<input type="number" id="buttonSize" value=13>
<!-- Create a div where the circle will take place -->
<div id="dataviz_buttonEventListener"></div>
<script>
// Initialize a circle
var theCircle = d3.select("#dataviz_buttonEventListener")
.append("svg")
.append("circle")
.attr("cx", 100)
.attr("cy", 70)
.attr("stroke", "black")
.style("fill", "#69b3a2")
.attr("r", 20)
// A function that update the color circle
function changeSize() {
theCircle
.attr("r", this.value)
}
// Add an event listener to the button created in the html part
d3.select("#buttonSize").on("input", changeSize )
</script> d3.jsthis magic variable to recover the option that has been chosen before calling the updateChart() function,<!DOCTYPE html>
<meta charset="utf-8">
<!-- Load d3.js -->
<script src="https://d3js.org/d3.v4.js"></script>
<!-- Create a div where the circle will take place -->
<div id="dataviz_builtWithD3"></div>
<script>
// Create data = list of groups
var allGroup = ["yellow", "blue", "red", "green", "purple", "black"]
// Initialize the button
var dropdownButton = d3.select("#dataviz_builtWithD3")
.append('select')
// add the options to the button
dropdownButton // Add a button
.selectAll('myOptions') // Next 4 lines add 6 options = 6 colors
.data(allGroup)
.enter()
.append('option')
.text(function (d) { return d; }) // text showed in the menu
.attr("value", function (d) { return d; }) // corresponding value returned by the button
// Initialize a circle
var zeCircle = d3.select("#dataviz_builtWithD3")
.append("svg")
.append("circle")
.attr("cx", 100)
.attr("cy", 70)
.attr("stroke", "black")
.style("fill", "yellow")
.attr("r", 20)
// A function that update the color of the circle
function updateChart(mycolor) {
zeCircle
.transition()
.duration(1000)
.style("fill", mycolor)
}
// When the button is changed, run the updateChart function
dropdownButton.on("change", function(d) {
// recover the option that has been chosen
var selectedOption = d3.select(this).property("value")
// run the updateChart function with this selected option
updateChart(selectedOption)
})
</script> This example shows how to create a radio button and an event listener to it. This event listener is able to figure out when the radio button state changes. Then, the trickiest part is to recover the current value of the radio button.
<!DOCTYPE html>
<meta charset="utf-8">
<!-- Load d3.js -->
<script src="https://d3js.org/d3.v4.js"></script>
<!-- Create the radio button -->
<div id="colorButton">
<input type="radio" name="colorButton" value="red" checked> Red<br>
<input type="radio" name="colorButton" value="blue"> Blue<br>
<input type="radio" name="colorButton" value="green"> Green<br>
</div>
<!-- Create a svg area-->
<svg id="dataviz_delay" width="400px" height="200px"></svg>
<script>
// Position of the circles on the X axis
var position = [50, 150, 250, 350]
// Add circles at the top
var theCircles = d3.select("#dataviz_delay")
.selectAll("mycircles")
.data(position)
.enter()
.append("circle")
.attr("cx", function(d){return d} )
.attr("cy", 100)
.attr("r", 10)
// Function that change a color
function changeColor() {
var radioValue = $("input[name='colorButton']:active");
console.log(radioValue)
theCircles
.transition()
.style("fill", radioValue)
}
// Event listener to the radio button
d3.select("#colorButton").on("change", changeColor )
</script> 
This example shows how to create a slider that controls circle size. An event listener constantly checks if the slider value is modified thanks to an on("change",..) statement. Recovering the slider value is simple using this.value.
<!DOCTYPE html>
<meta charset="utf-8">
<!-- Load d3.js -->
<script src="https://d3js.org/d3.v4.js"></script>
<!-- Create the radio button -->
<input type="range" name="mySlider" id=mySlider min="2" max="40" value="10">
<!-- Create a svg area-->
<svg id="dataviz_mySlider" width="400px" height="200px"></svg>
<script>
// Position of the circles on the X axis
var position = [50, 150, 250, 350]
// Add circles at the top
var theCircles = d3.select("#dataviz_mySlider")
.selectAll("mycircles")
.data(position)
.enter()
.append("circle")
.attr("cx", function(d){return d} )
.attr("cy", 100)
.attr("r", 10)
// Function that change a color
function changeSize(size) {
theCircles
.attr('r',size)
}
// Listen to the slider?
d3.select("#mySlider").on("change", function(d){
selectedValue = this.value
changeSize(selectedValue)
})
</script> Other examples involving sliders
