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：文字太尖銳

回答

相關問題