Custom graphs in javascript with d3

Question

I am facing problem while drawing the custom pie chart. Please can somebody help me how can I plot following custom pie chart with d3 js.

enter image description here

Here is my code before setting outer radius randomly.

data = [{"label":"1", "value":17}, 
        {"label":"2", "value":18}, 
        {"label":"3", "value":20},
        {"label":"4", "value":21}];

var r = 200;
var arc = d3.svg.arc().outerRadius(r).innerRadius(0);

And for displaying text I used :

var arcs = vis.selectAll("g.slice")
        .data(pie) 
        .enter()
        .append("svg:g")
        .attr("class", "slice");

arcs.append("svg:text")
      .attr("transform", function(d) { return "translate(" + arc.centroid(d) + ")";})
      .attr("text-anchor", "middle")
      .text(function(d, index) { return data[index].label; });

enter image description here

But after changing the outer radius with

function modifiedRadius(d, index) {
        return (data[index].value) * 5;
}

var arc = d3.svg.arc().outerRadius(modifiedRadius).innerRadius(0);

and same code for text then my pie graph is looking like :

enter image description here

"Text disappear !"

please help.

It is relatively easy to do with [`arc.outerRadius`](https://github.com/mbostock/d3/wiki/SVG-Shapes#wiki-arc_outerRadius), but I am curious why do you want to draw this chart where two slices which are supposed to denote `25%` are different in area and where `2%` slice is larger in area (and proportional angle too?) from the `8%` slice? — musically_ut, Jan 27 '14 at 07:26
I am agree that this is easy with arc.outerRadius(), but when I am do this then the text is disappear from centre with arcs.append("svg:text"). — GSD, Jan 27 '14 at 07:53
Then you do have some code which is working partially? Adding it to the post would help. — musically_ut, Jan 27 '14 at 08:11
Are there any errors on the console before the `text` nodes get added? Are the `text` nodes present in the DOM? — musically_ut, Jan 28 '14 at 07:48

Custom graphs in javascript with d3

0 Answers0