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中平滑？

回答

相關問題