d3.js: текст слишком резкий

Question

В настоящее время я работаю над использованием D3 для визуализации данных, я могу создать вложенную диаграмму пончиков. Теперь я пытаюсь добавить текст посередине. Пока что так хорошо, когда оно появляется, текст слишком «острый».

См. Изображение ниже.

Я попытался с помощью shape-rendering: crispEdges, но он не работает.

Вот сценарий для текста:

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 мудрый, у меня нет никаких.

Answer 1

Это может произойти, когда вы повторяете один и тот же текст снова и снова в одной точке. Проверьте с помощью инспектора браузера dom, чтобы узнать, сколько текстовых элементов у вас в центре пирога. Если это несколько, и они имеют одну строку, это ваша проблема.

См эффект здесь: 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; })