饼图外弧边界边界d3（SVG）

Question

我试图弄清楚如何向d3（svg）中的饼形图的圆弧添加外边界。

例如，这是一个饼图： https : //gist.github.com/enjalot/1203641

我正在寻找这样的东西： http : //jsfiddle.net/8T7Ew/

我决定创建一个甜甜圈，其内半径以饼图的外半径结束处为起点。 但是我发现我无法将两个切片连接在一起。 当您将鼠标悬停在饼图切片上时，如上面的jsfiddle所示，相应的甜甜圈切片应该可见。

我的意思示例：

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

这可能吗？ 如果是这样，最好的解决方法是什么？ 我假设正在做边框，但是我不确定如何为边框创建外弧。 任何帮助，将不胜感激。

Answer 1

你可以做这样的事情。 这是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
    });