Fixing the Voronoi Diagram

By moving the events to the Voronoi diagram, the selections will be changed. We'll need to update the selections to fix the chart.

In this lecture, we are going to fix a problem with the Voronoi diagram. If we hover our mouse over any of the dots, the tooltip appears. That is great, but we have lost the effect we had on the circles. The circles remain the same color and size. It is not clear as to which dot the reader is hovering over. This can become even more difficult to read if we are hovering over dots clustered close together.

We can fix this problem by drawing another circle. We will draw a circle over the original circle. The newly drawn circle will be enlarged with its color change. As before, when the reader hovers away from the dot, the newly drawn dot will be removed.

Drawing a circle

We are going to start by drawing a circle. The new circle will be drawn in our mouseenter event. We are going to change the selection we are performing at the beginning of the function. The this keyword no longer references the circle. Instead, it references the <path> element.

Using the container selection, we will replace this selection with the append() function to add a new circle.

Get hands-on with 1200+ tech skills courses.