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

Question

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

我已经搜索过了。但我唯一找到的是 stroke-linejoin: round;。正如你在这里看到的：

好多了，但我还是不满意。

有什么办法可以得到真正流畅的线条。或者假设也有一个偶数 "rounder" linejoin?

Answer 1

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

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

Answer 2

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

您用来平滑路径的任何技术（例如曲线拟合算法）都可能导致您的河流表示比您现在拥有的更不准确。

Answer 3

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

参见 D3js-Topojson : how to move from pixelized to Bézier curves? and Geodata to d3.svg.line interpolation by E. Meeks, and 。

编辑：有一个minimal stand alone case study for line smoothing that you can fork via its associated gist's git repository. The idea of d3.svg.line together with interpolations of y coordinates for lines smoothing is from E.Meeks. E. Meeks explains his approach here。

Edit2 & solution: Í突然想起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

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

Making a SVG path like a smooth line instead of being ragged

svg

path

smoothing

topojson