使SVG路径像平滑线而不是粗糙

Question

在我的项目中,我从pathes创建河流线.由于我的大笔划宽度,它非常粗糙:

我已经四处寻找了.但我发现的唯一的事情是stroke-linejoin: round;.正如你在这里看到的:

它更好,但我仍然不满意.

有没有办法让一条非常流畅的线条.或者让我们说有一个甚至"更圆"的linejoin？

Answer 1

一个有趣的方向是利用d3.svg.line从geoJSON特征的坐标生成路径,此时您可以使用D3的插值方法.

请参阅D3js-Topojson:如何从像素化曲线转向Bézier曲线？和Geodata到E. Meeks的d3.svg.line插值,以及topojson的Crispy边缘？.

编辑:有一个关于行平滑的最小独立案例研究,您可以通过其关联的gist的git存储库进行分叉.d3.svg.line与y线条平滑坐标插值的概念来自E.Meeks.E.米克斯在这里解释了他的方法.

编辑2和解决方案: Í突然想起topojson在哪里被转换成geojson.执行以下操作,您可以使用topojson文件并最终获得bezier曲线,并根据您的选择进行推断.以下将有效:

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");
})

现场演示:最小的d3js线平滑,topojson版本