svg - 使SVG路径像一条平滑的线，而不是参差不齐

Question

在我的项目中，我从路径创建了河线。而且由于我的大笔划宽度，它非常衣衫的:

我已经搜索了。但是我发现的唯一是stroke-linejoin: round;。如您在这里看到的:

这是更好的方法，但我仍然不满意。

有什么方法可以使线条流畅。或者说也有一个“rounder” linejoin 吗？

Answer 1

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

请参阅E. Meeks的D3js-Topojson : how to move from pixelized to Bézier curves?和Geodata to d3.svg.line interpolation和Crispy edges with topojson?。

编辑:有一个minimal stand alone case study for line smoothing，您可以通过其关联的gist的git仓库进行派生。 d3.svg.line以及y坐标插值用于线平滑的想法来自E.Meeks。 E. Meeks解释了他的方法here。

Edit2和解决方案:Í突然想起了将topojson动态转换为geojson的位置。执行以下操作，您可以使用topojson文件并通过选择的外推法最终获得贝塞尔曲线。以下将起作用:

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

现场演示: Minimal d3js line smoothing, topojson version