javascript - d3.js:文字太清晰

我目前正在使用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方面，我没有任何东西。

最佳答案

当您在同一点一遍又一遍地绘制相同的文本时，可能会发生这种情况。使用浏览器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; })