Hi, I'm Nicholas Johnson!

software engineer / trainer / AI enthusiast


We can listen out for user events using the d3 on() method.

Say we have a list of rect elements, we can listen for an event and assign a callback, just as we might with jQuery.

Unlike jQuery though, we have access to the data for that element, and also the iterator.

You could use this to show a label on click for example.

d3.selectAll("rect").on("click", function (data, i) {
  // do something here

Event types

Many event types are supported including:

  • “click”
  • “mouseover”
  • “mouseout”
  • “submit”


We also have access to the clicked on element via the function’s “this” variable. This will contain a plain DOM node, which we can then convert to a D3 selection by passing it to the d3.select function.

d3.selectAll("rect").on("click", function (data, i) {
  let rect = d3.select(this);
  rect.attr("fill", "red");

We can then apply any function we like.

Getting the mouse position

We can get the mouse position for an event using the d3.mouse function.

let mousePos = d3.mouse(this);
// returns x,y coords [25, 16]

Exercise - Display different data on click

Create 3 little button elements (you can style these nicely if you like). Use the on() function to listen out for a click. When a click is detected, redraw your favourite chart using a different data set.

Bonus points for animation.

Further Exercise - Highlight a segment

When a click is detected on an element in your graph, highlight it by displaying the data values next to it.

You can display these values using a text element in the SVG, or in a div underneath the SVG element.