SVG路径渲染可以通过几何精度选项进行消除锯齿吗？

问题描述：

我知道SVG的geometricPrecision样式选项，但是路径仍然会出现丑陋的别名。我使用的数据集相当密集，大约有400个点。看看下面的红色路径。SVG路径渲染可以通过几何精度选项进行消除锯齿吗？

是否有在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);

如果您向我们展示了如何* *创建红色路径，与实际的代码，我们能想到的插值这条道路，而不是处理SVG精度。 –

@GerardoFurtado我添加了一些细节。 – wrkyle

过滤路径数据以排除位于先前包含点的1.5px范围内的点并再次绘制。您可能会遇到来自太多数据的别名，而不是糟糕的渲染。 – Phrogz

答

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

如果您使用rangeRound而不是range创建D3比例，则它会映射到最近的像素，从而强制呈现的路径显示为别名。简单地将rangeRound切换为range会产生更平滑的路径，而不管用于内插数据的方法。

SVG路径渲染可以通过几何精度选项进行消除锯齿吗？

相关推荐