Making a SVG path like a smooth line instead of being ragged

Question

Well in my project I create river lines from pathes. And due to my kind of big stroke-width it is very ragged:

I already searched around. But the only thing I found was stroke-linejoin: round;. As you can see here:

it is way better but I'm still not satisfied.

Is there any way to get a really smooth line. Or let's say too have a even "rounder" linejoin?

Answer 1

An interesting direction is to leverage d3.svg.line to generate paths from the coordinates of your geoJSON feature, at which point you would be able to use D3's interpolate methods.

See D3js-Topojson : how to move from pixelized to Bézier curves? and Geodata to d3.svg.line interpolation by E. Meeks, and Crispy edges with topojson? .

---

Edit: There is a minimal stand alone case study for line smoothing that you can fork via its associated gist's git repository. The idea of d3.svg.line together with interpolations of y coordinates for lines smoothing is from E.Meeks. E. Meeks explains his approach here.

---

Edit2 & solution: Í suddenly remembered where topojson is converted into geojson on the fly. Doing the following, you can work with topojson files and eventually get bezier curves, with the extrapolation of your choice. The following will work:

d3.json("./world-110m.json", function(data){
    console.log(data)
    var geojson = topojson.feature(data, data.objects.countries);
    var newJson = newgeoson(geojson);
    console.log(JSON.stringify(newJson))

    d3.select("body").append("svg").attr("id","world")
      .selectAll("path")
        .data(newJson)
      .enter()
        .append("path")
        .style("stroke-width", 1)
        .style("stroke", "black")
        .style("fill-opacity", .5)
        .attr("d", d3.svg.line()
          .x(function(d){ return d[0] })
          .y(function(d){ return d[1] }).interpolate("cardinal"))
        .style("fill", "#7fc97f");
})

Live demo : Minimal d3js line smoothing, topojson version

Answer 2

If you're not satisfied with stroke-linejoin:round you could look into creating the path outline ,

but maybe it would be easier if you try to smooth out your path with cubic beziers.

Answer 3

If you are unsatisfied with how it looks, then is seems to me that the problem is that your river is defined with too few points.

Any technique you use to smooth out the path, such as a curve fitting algorithm, will probably result in a representation of your river that is even less accurate than what you have now.