Pie Chart outer arc border boundaries d3 (svg)

Question

I'm trying to figure out how I can add an outerborder to the arcs that a pie chart has in d3 (svg).

For example, here is a pie chart: https://gist.github.com/enjalot/1203641

I'm looking for something like this: http://jsfiddle.net/8T7Ew/

I decided to create a donut whose inner radius start's where the outer radius of the pie chart ends. But I find that I won't be able to connect the two slices together. When you hover over the pie chart slice the respective donut slice should be visible as seen in the above jsfiddle.

Example of what I mean:

    var arc = d3.svg.arc()
                .outerRadius(radius - 10)
                .innerRadius(0);
    var arc_outer = d3.svg.arc()
                    .outerRadius(radius + 10)
                    .innerRadius(radius - 10);

Is this possible? If so, what would be the best way of going about it? I'm assuming doing a border, but I'm not sure how to create an outer arc for the border. Any help would be appreciated.

Answer 1

You can do something like this. Here is jsfiddle - http://jsfiddle.net/cuckovic/9Lgrn/

var w = 500,
    h = 500;

var data = [10, 80, 50, 60, 30, 42, 27, 77];

var max = d3.max(data);
var min = d3.min(data);

var color = d3.scale.linear()
    .domain([min, max])
    .range(["darkred", "steelblue"]);

console.log(color(50));

var canvas = d3.select("body").append("svg")
    .attr("width", w)
    .attr("height", h);


var group = canvas.append("g")
    .attr("transform", "translate(200, 200)");

var r = 150;

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

var arc2 = d3.svg.arc()
    .outerRadius(r + 10)
    .innerRadius(0);


var pie = d3.layout.pie()
    .value(function (d) {
    return d;
});

var arcs = group.selectAll(".arc")
    .data(pie(data))
    .enter()
    .append("g")
    .attr("class", "arc");

var asdf = arcs.append("path")
    .attr("d", arc)
    .attr("fill", function (d) {
    return color(d.data);
})


asdf.on("mouseover", function (d) {
    d3.select(this).transition().duration(200).attr("d", arc2);
});

asdf.on("mouseout", function (d, i) {
    d3.select(this).transition().duration(200).attr("d", arc);
});

var circle = group.append("circle")
    .attr({
        "cx": 0,
        "cy": 0,
        "r": 140,
        "fill": "none",
        "stroke": "#fff",
        "stroke-width": 2
    });