How to increase size of pie segment on hover in d3

I created pie chart using d3.
How to increase size of pie segment on hover?
As you can see, green segment is so small so I want to change it size like red segment. How can I do this?

My code:

var w = 400;
var h = 400;
var r = h/2;
var color = d3.scale.category20c();

var data = [{"label":"Category A", "value":20}, 
                  {"label":"Category B", "value":50}, 
                  {"label":"Category C", "value":30},
           {"label":"Category A", "value":20}, 
                  {"label":"Category B", "value":50}, 
                  {"label":"Category C", "value":30},
           {"label":"Category A", "value":20}, 
                  {"label":"Category B", "value":50}, 
                  {"label":"Category C", "value":5}];

var vis ='#chart').append("svg:svg").data([data]).attr("width", w).attr("height", h).append("svg:g").attr("transform", "translate(" + r + "," + r + ")");
var pie = d3.layout.pie().value(function(d){return d.value;});

// declare an arc generator function
var arc = d3.svg.arc().outerRadius(r);
var arcOver = d3.svg.arc()
        .outerRadius(r + 9);

// select paths, use arc generator to draw
var arcs = vis.selectAll("g.slice").data(pie).enter().append("svg:g").attr("class", "slice");
    .attr("fill", function(d, i){
        return color(i);
    .attr("d", function (d) {
        // log the result of the arc generator to show how cool it is :)
        return arc(d);
     .on("mouseenter", function(d) {
               .attr("d", arcOver)             
        .on("mouseleave", function(d) {
               .attr("d", arc)

There is example in js fiddle : jsfiddle
pie chart

Source: javascript

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.