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

在我的项目中，我从路径创建了河流线。由于我的笔划宽度很大，所以非常不整齐：

我已经到处找过了。但我唯一发现的是

笔划线条连接：圆形。正如你在这里看到的：


虽然好多了，但我还是不满意

有没有什么方法可以让这条线变得非常平滑。或者说，如果您对笔划线条连接不满意，也可以使用“更圆”的线条连接？

你可以考虑创建

但是，如果你试着用你自己的方式来铺平道路，也许会更容易些
 如果您对它的外观不满意，那么在我看来，问题在于您的河流定义的点太少

任何用于平滑路径的技术，如曲线拟合算法，都可能导致河流的表示比现在更不准确。
一个有趣的方向是利用d3.svg.line从geoJSON功能的坐标生成路径，在这一点上，您将能够使用D3的插值方法

见E.米克斯和


编辑：您可以通过其相关gist的git存储库进行分叉。d3.svg.line与
y
坐标插值用于直线平滑的思想来自E.Meeks。米克斯解释了他的方法


Edit2&solution:Í突然想起了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");
})

现场演示：

立方贝塞尔并不是一个真正的选项，出于某些原因，我需要选择这条路。另一个例子看起来很难，但很有趣=/但不知道如何开始，css解决方案会更好。实际上它是topojson，原始河流在河流中有很多不同的点。因此，可能是topojson以某种方式减少了点以获得更小的文件。我自己最终选择通过topojson命令行工具使用更微妙的topojson简化。但@Emeeks的这种方式也吸引了我的眼球，但简单化意味着我丢失了数据。但是我想把它打印成我画出来的那样详细（=），所以这不是我的解决方案。正如我所说，工作或有问题时回来=）谢谢。我只是这里的一个指针。你必须阅读E.米克斯的解释，所有的感谢都应该归于他。D3js还可以动态地将topojson转换为geojson。我不知道在哪一层，tho。关键是，这应该是可能的，但确实需要进一步询问有关Stackoverflow的问题，并挖掘topojson data=>行平滑的答案。我很快（过去一个小时）制作了一个最小的独立版本的E.Meek代码，这个新版本将更容易破解。请看我的答案。@kwoxer:刚刚添加了一个topojson解决方案，值得一试。检查我的代码块，fork，放入一些
console.log（JSON.stringify（d））
并检查数据。通用解决方案完成后，您的代码就可以到达了。