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

那么在我创建的项目中河流线 from pathes。并且由于我的这种大笔划宽度这个很ragged:

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

好多了，但我仍然不满意。

有什么办法可以得到一条真正平滑的线吗？或者说也有一个偶数“圆角”线连接?

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

See D3js-Topojson：如何从像素化曲线移动到贝塞尔曲线？ and 地理数据到 d3.svg.line 插值作者：E.米克斯，以及带有 topojson 的脆边？ .

Edit:有一个线平滑的最小独立案例研究您可以通过其关联的 gist 的 git 存储库进行 fork。 d3.svg.line 的想法以及插值y线条平滑的坐标来自 E.Meeks。 E.米克斯解释了他的方法here.

编辑2和解决方案：Í 突然想起了 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");
})

现场演示：最小 d3js 线平滑，topojson 版本