D3 旋转文本 :在 Chrome 中平滑

D3 rotated text : smoothing in Chrome?

本文关键字：Chrome 平滑 旋转 文本 D3      更新时间：2023-09-26

我创建了一个 D3 饼图，并将文本标签旋转为径向向外流动。这在IE上看起来不错，但不幸的是，在Chrome中，文本看起来很糟糕。CSS webkit 字体平滑技巧似乎不起作用。我猜这需要在 SVG/D3 土地上完成......？Chrome只是不想合作。

完整的代码在这个小提琴上：http://jsfiddle.net/mn5bT/2/

我以这种方式附加文本标签：

g.append("text")
.attr("transform", function(d) {
var c = arc.centroid(d),
    x = c[0],
    y = c[1],
    h = Math.sqrt(x*x + y*y); // pythagorean theorem
    flipAngle = d.endAngle > Math.PI;
    angleOffset = flipAngle? 90:-90;
    return "translate(" + (x/h * radius) +  ',' + (y/h * radius) +  ")" +
            "rotate(" + (angleOffset + 180*(d.endAngle + d.startAngle)/2/Math.PI) + ")";
})
.attr("dy", ".35em")
.attr("text-anchor", function(d) {
    // are we past the center?
    return (d.endAngle + d.startAngle)/2 > Math.PI ? "end" : "start";
})
.text(function(d) { return d.data.value.campus; });

您可以尝试通过添加模糊滤镜来"手动消除锯齿"文本。它在Chrome上看起来好一点。

var defs = svg.append("defs");
var filter = defs.append("filter")
    .attr("id", "drop")
    .attr("height", "130%");
filter.append("feGaussianBlur")
    .attr("in", "SourceGraphic")
    .attr("stdDeviation", .5)
    .attr("result", "blur");
filter.append("feOffset")
    .attr("in", "blur")
    .attr("dx", 0)
    .attr("dy", 0)
    .attr("result", "offsetBlur");
var feMerge = filter.append("feMerge");
feMerge.append("feMergeNode")
    .attr("in", "offsetBlur")
feMerge.append("feMergeNode")
    .attr("in", "SourceGraphic");

感谢cpbotha的原始示例。 现场小提琴：http://jsfiddle.net/ey8Xp/

您可以为 SVG 文本设置特殊属性，特别是应该感兴趣的text-rendering属性。当我添加时，您的示例对我来说看起来好多了

text {
  text-rendering: geometricPrecision;
}

到 CSS。

来自 使用 CSS 改进字体呈现

我做了一些研究，结果发现Windows并不适用 在大多数情况下，对文本进行抗锯齿。好消息是，在Microsoft 最新的浏览器实际上看起来相当不错：字体渲染是 与Chrome和Firefox相比要好得多。

相关文章：