在选择时切换 d3 donut arc

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