javascript - SVG 路径渲染是否可以在 geometricPrecision 选项之外消除锯齿？

Question

我知道 SVG 的 geometricPrecision 样式选项，但是路径仍然表现出大量的锯齿。我使用的数据集相当密集，大约有 400 个点。看看下面的红色路径。

SVG 中的抗锯齿路径还有其他选项吗？

编辑:

该行是从制表符分隔的数据创建的，如下所示(减去不重要的细节):

var x = d3.scaleLinear()
    .range([0, width]);

var y = d3.scaleLinear()
    .rangeRound([height, 0]);

x.domain([0,240000]);
y.domain([0,30]);


var line = d3.line()
    .x(function(d) { return x(d.income); })
    .y(function(d) { return y(d.tax); });
...
...
...

g.append("path").classed("linedata", true)
        .datum(data)
        .attr("fill", "none")
        .attr("stroke", "#e04444")
        .attr("stroke-linejoin", "round")
        .attr("stroke-linecap", "round")
        .attr("stroke-width", 2.3)
        .attr("d", line);

Answer 1

事实证明，这里的问题不是密集数据的混叠或插值问题。虽然我最终确实将数据密度优化为路径曲率，但问题是我用来将数据值映射到 SVG 像素值的 d3.scale。

如果您使用 rangeRound 而不是 range 创建 D3 比例，它会映射到最近的像素，从而强制渲染路径出现锯齿。只需将 rangeRound 切换为 range 即可得到更平滑的路径，而不管用于插值数据的方法如何。