d3.js：文字太尖锐

我目前正在使用D3进行数据可视化，到目前为止，我可以创建一个嵌套的圆环图。现在，我正在尝试在中间添加文本。然而，到目前为止，这样的文字太过“尖锐”了。d3.js：文字太尖锐

请看下面的图片。

我一直在使用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明智的，我没有任何。

来源

2016-10-03 Kawamoto Takeshi

你所说的 “尖” 是什么意思？ – baranskistad

@bjskistad，尖锐，我的意思是，线条太过锯齿。它一点都不光滑。 –

合适的CSS属性是[text-rendering]（https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/text-rendering），而不是“形状渲染”。 – user1620220

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

来源

2016-10-03 13:36:43 mgraham

谢谢！在检查了这些元素后，我发现'请求'文本已经被写入了很多次，这取决于创建了多少个弧。所以，我没有将这些文字附加到图表上，而是将它附加到主要的svg中。 –

d3.js：文字太尖锐

回答

相关问题