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

Question

在我的项目中，我从 pathes 创建河流线。由于我的大笔画宽度，它非常参差不齐：

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

它更好但我仍然不满意。

有没有办法让一条非常流畅的线条。或者让我们说有一个甚至＆＃34; rounder＆＃34; 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?。

---

编辑：您可以通过其关联的gist的git存储库进行分叉minimal stand alone case study for line smoothing。 d3.svg.line以及用于线条平滑的y坐标插值的想法来自E.Meeks。 E. Meeks解释了他的方法here。

---

Edit2＆amp;解决方案：Í突然想起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");
})

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

Answer 2

如果您对stroke-linejoin:round不满意 你可以考虑创建path outline，

但是如果你尝试用cubic beziers来平滑你的路径，也许会更容易。

Answer 3

如果你对它的外观不满意，那么在我看来问题是你的河流定义得太少了。

用于平滑路径的任何技术（例如曲线拟合算法）都可能导致您的河流的表现甚至不如您现在的那样准确。