I’d like to add some symbols to extend the ones included in d3.symbol (e.g. https://github.com/d3/d3-shape/blob/master/src/symbol/cross.js) but that would seem to require quite a bit of effort to encode the SVG. Is there a way to convert a SVG symbol snippet into something that would work with d3.symbol?
Hi john-clarke,
I’ve been using the symbol tag. It’s a pretty easy way to cut and paste custom paths. But it doesn’t use the d3.shape library.
Here’s an example.
I agree with @bchoatejr’s recommendation. Seems like a good use of the SVG Symbol and Use elements.
d3.symbol would be more appropriate if you wanted to ensure that the visual weight of your symbols for a given value (when using graduated symbols) is comparable. If you’re using fixed-size symbols it should be easier to replicate them in SVG rather than creating a custom symbol for d3.symbol.
That said, here’s a simple converter from SVG path data to Canvas:
2+ years later, and this approach still holds water - thanks @bchoatejr for sharing this! @mbostock , do you have any sense of if/when performance within observable takes a hit with this approach? Is it in the hundreds, thousands of elements rendered? Is this an impossible question?