Javascript d3.js：文本太尖锐

我目前正在使用D3进行数据可视化，到目前为止，我能够创建一个嵌套的圆环图。现在，我试图在中间添加一个文本。不过，到目前为止效果还不错，当它渲染时，文本太“尖锐”

请看下图

我尝试过使用

形状渲染：crispEdge

，但它不起作用

以下是文本的脚本：

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检查器进行检查，查看饼图中心有多少文本元素。如果它不止一个，而且它们是同一个字符串，那就是你的问题

请参见此处的效果：

---

你说的“锋利”是什么意思？@bjskistad，我的意思是，线条太参差不齐了。它一点也不平滑。合适的CSS属性是，而不是

形状渲染

。谢谢！在检查元素后，我发现“请求”文本的编写次数与创建弧的次数相同。因此，我没有将文本附加到图表中，而是将其附加到主svg中。我想我应该添加一个可能发生这种情况的附加示例：它出现在绘图标题和y标签中，原因是当我进行数据连接时，我使用了.data（y标签）而不是.data（[y标签]）

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