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; })