How to smoothen a path using D3

Question

This is concerning: Making a SVG path like a smooth line instead of being ragged

So would like to smooth all lines on my map if possible. Finally I have a topojson but I was not able to find anything that can smooth a topojson path.

Here is a solution that smoothes for a geojson at least: http://bl.ocks.org/hugolpz/d53d33af6ffb1366e187

And here is something about a single line: http://www.d3noob.org/2013/01/smoothing-out-lines-in-d3js.html

But I have no clue how to change it. Here is a small jsfiddle example where you can play around: jsfiddle.net/kwoxer/kpL1uyy2/6/

Would be awesome if this would be something like a simple command called smooth =)

Answer 1

Well since there is no good solution on SVG right now, I just solved it with CSS as best as possible. So this might not be the perfect solution, but at least looking way better then without.

First of all we set the path to be way smoother:

path {
    stroke-linejoin: round;
    stroke-miterlimit: 2;
    stroke-linecap: round;
}

and now assuming we have an outline drawing we use the following:

#outline path{
    fill: #eee;
    stroke: #eee;
    stroke-width: 0.5px;
}

This one should look very smooth. It for sure depends on the level of detail of the SVG path itself.