O'Reilly logo

Expert Data Visualization by Jos Dirksen

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Adding a mouseover effect for selecting and dragging.

In this last section for this visualization, we're going to add support for dragging nodes. We'll add a highlight when you select either a location or a character, and add a simple text at the bottom showing the name and location of the selected node.

We're aiming for something that looks like this:

The first thing we need to do is add the correct listeners. Luckily, D3 provides standard functionality for this. To add the listener to our nodes, we extend the creation of the nodes with following code:

var node = svg.append("g")     .attr("class", "nodes")     .selectAll("g")  .data(graph.nodes) ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required