Instantly share code, notes, and snippets.

# mbostock/.block

Last active November 5, 2023 06:08
Star You must be signed in to star a gist
Closest Point on Path
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters

This page demonstrates a simple approximate algorithm for finding the closest point on any given SVG path element. Although the algorithm is not guaranteed to return the best answer, the answer is reasonably good, and the accuracy is tunable at the expense of performance. It is based on Mike Kamermans’ excellent Primer on Bézier Curves.

A coarse linear scan of the path provides an initial guess. Then, a binary search improves the guess to the desired level of precision (here, about 1px). The coarseness of the initial scan is configurable; for paths where there may be multiple close points at different lengths along the path, such as at intersections, a finer initial scan is needed to avoid converging on a suboptimal answer.

Knowing the closest path to a given point is useful for multi-line charts in the same way the Voronoi tessellation is useful for scatterplots: it makes it easier to select or highlight elements using the mouse. Instead of requiring the user to hover over a line precisely, you can use this algorithm to find the line closest to the mouse. Alternatively, you can compute a Voronoi diagram for lines by sampling points along each path.

This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters


### averas commented Dec 19, 2013

Very useful!

Another similar challenge I've ran into is "the point within a polygon as far away from the boundary as possible". This point is useful for label placements within polygons, especially in irregularly shaped polygons where a simple "polygon center" approach places the label in non-intuitive positions (even outside of the polygon).

Are there any D3 examples addressing this?

### netsi1964 commented Jul 18, 2015

Thank you for sharing - great example of use of Web API Interface for SVG.
I have copy and pasted this code to a pen on CodePen, and written a blog post there where I embed it - I have credited you and linked to this Gist: SVG is nice in many ways

### colinmegill commented Apr 28, 2017

This is amazing. 37 & 48 a duplicate declaration?

thank you

### cdaringe commented Dec 1, 2019

for future visitors, consider tuning the precision to your use case: https://gist.github.com/mbostock/8027637#file-index-html-L69

i made a path editor. as the path got longer, i had originally not adjusted the precision, and the linear scan would take very long. i made the precision value a function of path length, which may be a better default, @mbostock, if we want to adjust the gist :)

`var precision = Math.floor(pathLength / 10)`

### cdaringe commented Dec 1, 2019

coming back just to say thank you!. enabled this: https://github.com/cdaringe/d3-svg-path-editor