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