選擇開關d3甜甜圈弧

Question

我的頁面中有多個甜甜圈，每個甜甜圈都會有一個較薄的部分（如未填充的部分）和另一個弧形色。

當用戶點擊彩色弧線時，它應該有一個白色的邊框。如果用戶選擇其他圓弧（未填充），未填充區域會被填充顏色，像另一個區域一樣改變寬度並且會有邊框，同時填充的區域會被填充。總結一下，弧形部分應該打開選擇。

我可以通過應用類/樣式來實現嗎？在一個頁面中，一次只能選擇一個圓弧，其他所有選擇都將被清除。

// 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

試試這個代碼

.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