SVG路径渲染可以在geometryPrecision选项之外消除锯齿吗？

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，即可获得更平滑的路径。