Simplification of generated SVG D3js path string

Question

I'm trying to optimize the SVG a bit, which I create using the amazing D3js geo-module.

I use d3.geo.path as the d attribute generator for SVG paths:

 path = d3.geo.path().projection(config.projection); // projection is initialized somewhere else 

and then using it to create such paths:

 svg.selectAll(".country") .data(countries) .enter() .insert("path", ".graticule") .attr({ class: "country", d: path }) 

and the path line types that I get are similar to the following:

 M713.601085,459.8780053259876L714.7443994399441,460.08170562468473L715.0310281028103,460.5903728431771L715.0310281028103... 

As you can see, some numbers are very long with too many decimal places and are not very useful at my current resolution, which clogs the DOM a bit and makes it sluggish to debug these paths (there are also a lot of them, since this is a world map with a lot of countries drawn on it).

So, my first approach was to create this pathSimplified wrapper for path :

 // Path simplified: take some decimals out of the 'd' string pathSimplified = function (d) { return path(d).replace(/(\.\d{4})\d+/g, '$1'); }; 

and then use path instead:

  //... .attr({ class: "country", d: pathSimplified }) 

This works, and now I get only 4 decimal places for each value in the path string. Like this:

 M713.6010,459.8780L714.7443,460.0817L715.0310,460.5903L715.0310... 

My question is: can this be done better, less hacky? It is incorrect to configure the line after it spat out the D3js path function, and it would be nice to specify rounding at some point of the path itself or projection ...

Answer 1

Your idea is good, simplifying a polyline helps, but you can do it better than just trimming the coordinates: there are algorithms for merging the polyline and can give you more pleasant results.

For example, look at the Ramer-Douglas-Picker algorithm . It is implemented in libraries such as Simplify.js (check out the demo on this page), which also allows you to configure it with tolerance. You will have to pass the string as an array of x / y-coordinates, but I hope this is not too difficult to do.

I also noticed that d3 geo-projections allow an accuracy parameter (for example, here ), maybe there is something similar that you missed? In any case, simplifying coordinates using simpleify.js is usually always possible.