title: Switch d3 donut arc on selection
body: <p>I have more than one donut in my page, each donut will have a thinner portion (like unfilled) and another arc colored. </p>
  
  <p>When user clicks on the colored arc, it should have a white border. And if user selects other arc (unfilled) the unfilled area get filled with color, changes the width like the other one and will have border, same time the filled one gets unfilled. To summarize the arc colored portion should get switched on selection.</p>
  
  <p>Can I achieve this by applying class/styles? In one page there should be only one arc selected at a time, all other selections will be cleared.</p>
  
  <pre><code>// 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);
  </code></pre>
  
  <p><strong><a href="https://jsfiddle.net/betasquirrel/6zn5rno9/17/" rel="nofollow noreferrer">JSFiddle</a></strong></p>