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?

Solution 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

Solution 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.

Solution 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.

Comments

[kwoxer]

Cubic beziers are not really an option, I need to take the path for some reasons. And the other example looks quite difficult uff but interesting =/ But no idea how to start and a css solution would be way better.

[kwoxer]

Actually it is topojson and the original river has really many different point in the line of the river. So it could be the topojson that it is reducing the points somehow to get a smaller file.

[kwoxer]

Yeah that looks good. Will bookmark and trying when I have some time for this. Thank you.

[Hugolpz]

I myself eventually chose to rather use a more subtile topojson simplification via topojson command line tool. But this @Emeeks way attracted my eyes as well.

[kwoxer]

But simplification means that I loose data. But I want it printed as deatailed as I drawed it =) So that's no solution for me. As I said coming back when working or having issues =) Thanks.

[kwoxer]

Mhh well I have no idea how to use the code from emeeks on jsfiddle.net/kwoxer/kpL1uyy2/6 Already tried a bit around on that simple case. But none were succesful. Could you maybe help me =/

[kwoxer]

Okay so that would be no way for me. Even my topojson file ist 500kB big. So there is no way for me right? Except the one from my question itself.

[Hugolpz]

I'am merely a pointer here. You must read E.Meeks explanations and all the thanks should go to him. D3js also convert topojson into geojson on the fly. I don't know at which level, tho. Point is, it should be possible, but it will indeed require to ask some further questions on Stackoverflow, and to dig for a topojson data => line smoothing answer. I quickly (past hour) made a minimal stand alone version of E.Meek code, this new version will be simplier to hack. See my answer.

[kwoxer]

Well I found this one here. Looks like Raphael would be easy to use: jsfiddle.net/ry8kT isn't it?

[kwoxer]

My fail that is just showing the SVG with Raphael. I will open a question on that. Because I still don't know how to create a geojson from my topojson in the browser.

[Hugolpz]

@kwoxer: just added a topojson solution which may deserve a try. Cheer.

[kwoxer]

Mhh but I have the path thing on the d value. I'm not sure how to replace with yours. But indded you stuff is looking great. So could you maybe show it on my jsfiddle? Would be awesome.

[Hugolpz]

Check out my blocks code, fork, put some console.log(JSON.stringify(d)) and inspect the data. General solution is done, your code is at reach.

[kwoxer]

I'm just getting null values: jsfiddle.net/kwoxer/g83ee4xf is that correct? What am I do wrong?

[Hugolpz]

I can's tell what, but your topojson data has something wrong. I reorganized your code and mixed it with what I previously provided to you. Your data fails jsfiddle.net/g83ee4xf/4, my data works jsfiddle.net/g83ee4xf/5 .

[kwoxer]

I produce the topojson on my PC from many different geojson files. Maybe here is the reason?

[kwoxer]

Actually I think I have another issue Hugo. So first of all I would like to check that because it not only the smoothing that could help me. I need more details. gis.stackexchange.com/questions/137173/…

[kwoxer]

Let us continue this discussion in chat.