d3.js: Text zu scharf

Question

Ich arbeite derzeit an der Verwendung von D3 für die Datenvisualisierung, bis jetzt bin ich in der Lage, ein verschachteltes Donut-Diagramm zu erstellen. Jetzt versuche ich einen Text in der Mitte hinzuzufügen. So weit, so gut, aber wenn es rendert, ist der Text zu "scharf".

Siehe Abbildung unten.

Ich habe mit shape-rendering: crispEdges versucht, aber es funktioniert nicht.

Hier ist das Skript für den Text ist:

g.append("text") 
.style("text-anchor", "middle") 
.style("font-family", "AgfaRotisSansSerif") 
.style("font-weight", "100") 
.style("font-size", "2em") 
.style("fill", "#8e44ad") 
.text("REQUESTS"); 

CSS klug, ich habe keine.

Answer 1

Dies kann passieren, wenn Sie denselben Text immer wieder am selben Punkt zeichnen. Überprüfen Sie mithilfe des Browser-Dom-Inspektors, wie viele Textelemente Sie in der Mitte des Kuchens haben. Wenn es mehr als eins ist und sie die gleiche Zeichenfolge haben, ist das dein Problem.

Siehe die Wirkung hier: http://jsfiddle.net/Q5Jag/2059/

var svg = d3.select('svg'); 

var dataSet = [{x: 0, text: "No Overplot"}, {x: 1, text: "Overplot", }, {x: 1, text: "Overplot", }, {x: 1, text: "Overplot", }, {x: 1, text: "Overplot", }, {x: 1, text: "Overplot", }, {x: 1, text: "Overplot", }]; 

var circle = svg.selectAll('circle') 
    .data(dataSet) 
    .enter() 
    .append('text') 
    .attr({ 
     x:function(d, i){ return d.x * 100 + 60 }, 
     y:50, 
     fill: 'black', 
     stroke: 'none', 
    }) 
    .text (function(d) { return d.text; })