餅圖外弧邊界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 
    });