Switch d3 Donut Bogen auf Auswahl

Question

Ich habe mehr als einen Donut in meiner Seite, jeder Donut wird einen dünneren Teil (wie ungefüllt) und einen anderen Bogen gefärbt haben.

Wenn der Benutzer auf den farbigen Bogen klickt, sollte er einen weißen Rahmen haben. Und wenn der Benutzer einen anderen Bogen auswählt (ungefüllt), wird der ungefüllte Bereich mit Farbe gefüllt, ändert sich die Breite wie der andere und hat einen Rand, gleichzeitig wird der gefüllte ungefüllt. Um den arc farbigen Teil zusammenzufassen, sollte die Auswahl eingeschaltet werden.

Kann ich dies erreichen, indem ich Klassen/Stile anwende? Auf einer Seite sollte immer nur ein Bogen ausgewählt sein, alle anderen Auswahlen werden gelöscht.

// data 
var dataset = [{ 
    color: "#5FC5EA", 
    value: 70 
}, { 
    color: "transparent", 
    value: 30 
}]; 

// size 
var width = 460, 
    z 
height = 300, 
    radius = Math.min(width, height)/2; 

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

// thin arc 
var arc1 = d3.svg.arc() 
    .innerRadius(radius - 20) 
    .outerRadius(radius - 11); 

// main arc 
var arc = d3.svg.arc() 
    .innerRadius(radius - 30) 
    .outerRadius(radius); 

// set svg 
var svg = d3.select("#d3-setup-donut").append("svg") 
    .attr("class", 'donut-chart') 
    .attr("width", width) 
    .attr("height", height) 
    .append("g") 
    .attr("transform", "translate(" + width/2 + "," + height/2 + ")") 
    .on('mouseout', function() { 
    d3.selectAll('.donut-tooltip').style('display', 'none'); 
    }); 

// tooltip 
var div = d3.select("body") 
    .append("div") 
    .attr("class", "donut-tooltip"); 

// draw thinner arc 
var path = svg.selectAll(".background") 
    .data(pie([{ 
    color: "#222427", 
    value: 1 
    }])) 
    .enter().append("path") 
    .attr("class", "background") 
    .attr("fill", function(d, i) { 
    return d.data.color; 
    }) 
    .attr("d", arc1) 
    .on('click', function(d, i) { 
    // 
    }) 
    .on("mousemove", function(d, i) { 
    var mouseVal = d3.mouse(this); 
    div.style("display", "none"); 
    div.html(d.data.label + " : " + d.value) 
     .style("left", (d3.event.pageX - 40) + "px") 
     .style("top", (d3.event.pageY - 35) + "px") 
     .style("opacity", 1) 
     .style("display", "block"); 
    }) 
    .on("mouseout", function() { 
    div.html(" ").style("display", "none"); 
    }); 

// draw main arc 
var path = svg.selectAll(".foreground") 
    .data(pie(dataset)) 
    .enter().append("path") 
    .attr("class", "foreground") 
    .attr("fill", function(d, i) { 
    return d.data.color; 
    }) 
    .attr("d", arc) 
    .on('click', function(d, i) { 
    d3.select(this) 
     .classed('selected', true); 
    }) 
    .on("mousemove", function(d, i) { 
    var mouseVal = d3.mouse(this); 
    div.style("display", "none"); 
    div.html(d.data.label + " : " + d.value) 
     .style("left", (d3.event.pageX - 40) + "px") 
     .style("top", (d3.event.pageY - 55) + "px") 
     .style("opacity", 1) 
     .style("display", "block"); 
    }) 
    .on("mouseout", function() { 
    div.html(" ").style("display", "none"); 
    }); 

// draw inner text 
svg.append("text") 
    .text('60%') 
    .attr("class", "donut-inner-val") 
    //.attr("x", radius/12 - 30) 
    //.attr("y", radius/12 - 10); 

svg.append("text") 
    .text('in progress') 
    .attr("class", "donut-inner-text") 
    .attr("x", (radius/12) - 35) 
    .attr("y", (radius/12) + 10); 

JSFiddle

Answer 1

diesem Code Versuchen

.on('click', function(d, i) { 
     d3.selectAll(".foreground").classed('selected', false); 
    if(d3.select(this).classed("active")){ 
     d3.select(this) 
     .classed('selected', true); 
    }else{ 
    d3.selectAll(".foreground").classed("active", false); 
    d3.select(this).classed("active",true); 

      d3.select(this) 
     .classed('selected', true); 
    } 
    }) 

DEMO