CODEWITHSUNDEEP
javascriptd3.js
Kawamoto Takeshi
Kawamoto Takeshi

Reputation: 606

d3.js: Text too sharp

I am currently working on using D3 for Data Visualization, so far, I am able to create a nested donut chart. Now, I am trying to add a text in the middle. So far so good, however, when it renders, the text is too 'sharp'.

Please see image below.

enter image description here

I have tried using shape-rendering: crispEdges but it is not working.

Here is the script for the text:

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 wise, I do not have any.

Upvotes: 1

Views: 474

Answers (1)

mgraham
mgraham

Reputation: 6207

This can happen when you draw the same text over and over again at the same point. Check using the browser dom inspector to see how many text elements you have in the centre of the pie. If it's more than one and they're of the same string, that's your problem.

See the effect here: 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; })

Upvotes: 2

Related Questions