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 に答える