D3旋转文字：在Chrome中平滑？

我创建了一个D3饼图并旋转了文本标签以径向向外流动。这在IE上看起来不错，但不幸的是，在Chrome浏览器中，文字看起来很糟糕。 CSS webkit字体平滑技巧似乎不起作用。我猜这需要在SVG/D3的土地上完成......？ Chrome只是不想合作。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; });

来源

2013-10-09 pmont

这是在Windows上吗？在linux的Chrome v31.0.1650.8-dev中，http://jsfiddle.net/mn5bT/2/中的文本标签被平滑地绘制（带有抗锯齿功能）。虽然有一些令人不解的问题（单独的问题）。 –

是的，我看到的文字杂乱是在Win8上运行的Chrome 30.0.1599.69m。还尝试了32.0.1664.3 dev-m灵气，并且仍然存在烦躁感。看起来像一个Chrome/Win特定的错误。 – pmont

我认为http://crbug.com/25541可能是你的事情。 –

您可以为SVG的文本设置特殊的性质，特别是text-rendering应该有兴趣。当我向CSS添加

text { 
    text-rendering: geometricPrecision; 
}

时，您的示例看起来好多了。

来源

2013-10-09 17:47:45

感谢您的快速响应！我将其添加到CSS中，但在Chrome 30.0中仍然看起来很糟糕。为了进行比较，请尝试在IE中查看它应该看起来多么流畅。 – pmont

可能是在特定版本的Chrome中无法正常工作。你也可以尝试一些其他的值，看看是否改善。 –

该解决方案极大地提高了Firefox中的渲染效果。 IE默认看起来很棒。但铬56似乎并没有对此作出任何反应。 :( – jlh

您可以尝试通过添加模糊滤镜来“手动消除别名”文本。 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/

来源

2013-10-10 03:31:53

请注意，这可能会使文本看起来不那么脆弱，当这个错误得到修复时 –

是的，这是一个彻头彻尾的破解 –

好的一个迈克尔。哈克与否，它做的工作，我不能够你可能会介意分享一个关于如何制作过滤器的链接吗？有文字说明的错误已被正式报告为一个错误，并且有人在Google上使用它吗？ – pmont

D3旋转文字：在Chrome中平滑？

回答

相关问题