Графические границы границ внешней границы 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 
    });