Voronoi with bounding circles

Community Help
1

I would like to achieve the bounding circles voronoi as seen in this blog post:

The author has an example of the code she is using to achieve the effect, but I cannot understand how to modify it to work with my simple example:

where I have the regular voronoi set up. I was hoping someone could point me in the right direction.

2

Here is an example of clipping a Voronoi diagram using circles around the sites:

The key parts are:

  • Define a clipPath for each circle.
  • Give each circle’s clipPath a unique identifier. (I used DOM.uid.)
  • Set the clip-path attribute for each circle using this identifier.

I wanted to draw two circles for each point (a small dot surrounded by a larger circle), so I used a G element to contain the circles. To avoid the G’s transform transforming the clip path, I used nested G elements.

Hope this helps.

2 Likes
3

Doh, cannot believe I missed that notebook when I searched. This should be what I need. Thanks.

4

Just managed to get it working using your notebook as inspiration:

Thanks for the example and clear instructions.

5

I wrote it in response to your question. :slightly_smiling_face:

2 Likes
6

@mbostock thanks for the example!

I may try to use an invisible version of this for specifying object hit targets on interactive diagrams.

1 Like