D3 旋转文本：在 Chrome 中平滑？答案

【问题标题】：D3 rotated text : smoothing in Chrome?D3 旋转文本：在 Chrome 中平滑？
【发布时间】：2013-10-17 04:57:39
【问题描述】：

我创建了一个 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; });

【问题讨论】：

这是在 Windows 上吗？在 linux Chrome v31.0.1650.8-dev 上，jsfiddle.net/mn5bT/2 中的文本标签被平滑地绘制（使用抗锯齿）。不过，基线对齐有些不稳定（单独的问题）。
是的，我看到的文本锯齿是在 Win8 上运行的 Chrome 30.0.1599.69m。还尝试了 32.0.1664.3 dev-m Aura，锯齿仍然存在。看起来像 Chrome/Win 特定的错误。
我认为crbug.com/25541 可能适合你。
哇，这是一个长期运行的线程！看起来修复程序已作为“运行时启用功能”放入，但我还没有弄清楚是什么标志启用它。 chrome://flags/#enable-experimental-webkit-feaures

标签： javascript css google-chrome svg d3.js

【解决方案1】：

您可以尝试通过添加模糊过滤器来“手动消除锯齿”您的文本。它在 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's original example。现场小提琴：http://jsfiddle.net/ey8Xp/

【讨论】：

请注意，当该错误得到修复时，这可能会使文本看起来不那么清晰。
是的，这完全是 hack
不错的迈克尔。黑客与否，它的工作。我自己无法弄清楚这一点。你介意分享一个关于如何制作过滤器的链接吗？文本锯齿是否已被正式报告为错误，谷歌是否有人在处理它？
docs.webplatform.org/wiki/svg/elements/filter 是主要的网络平台页面。我为 html5devconf 做了一个过滤器教程，你可以在这里阅读：slideshare.net/mullany1/svg-filters-html5-devconf-apr-2013
太棒了。谢谢！

【解决方案2】：

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

text {
  text-rendering: geometricPrecision;
}

到 CSS。

【讨论】：

感谢您的快速回复！我将它添加到 CSS 中，但它在 Chrome 30.0 中看起来仍然很糟糕。为了进行比较，请尝试在 IE 中查看它的流畅度。
在特定版本的 Chrome 中它可能无法正常工作。您还可以尝试其他一些值，看看是否可以改善它。
此解决方案极大地改进了 Firefox 中的渲染。默认情况下，IE 已经看起来很棒。但是 chrome 56 似乎根本没有对此做出反应。 :(

【解决方案3】：

来自Improving font rendering with CSS

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

【讨论】：