1

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

3 回答 3

2

您可以尝试通过添加模糊过滤器来“手动消除锯齿”您的文本。它在 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/

于 2013-10-10T03:31:53.150 回答
1

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

text {
  text-rendering: geometricPrecision;
}

到 CSS。

于 2013-10-09T17:47:45.997 回答
0

来自使用 CSS 改进字体渲染

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

于 2019-04-05T13:41:58.917 回答