D3 Donut Chart Multi Click

D3 Donut Chart Multi Click and get values.

by Khadeer Mohammed

HTML

<script src="https://d3js.org/d3.v3.min.js"></script>
<div id="chart"></div>

<div id="labels"></div>

CSS

body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  margin: auto;
  position: relative;
  width: 960px;
}

text {
  font: 10px sans-serif;
}

form {
  position: absolute;
  right: 10px;
  top: 10px;
}

ul li {
  display: inline-block;
  padding: 5px;
  background: #98b4e2;
  border-radius: 5px;
  margin: 0 5px;
}

ul li a {
  dipslay: inline-block;
  margin: 0 5px;
  cursor: pointer;
}

JavaScript

var dataset = {
  apples: [53245, 28479, 19697, 24037, 40245]
};

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

var color = d3.scale.category20();

var selectedArcs = [];

var pie = d3.layout.pie()
  .sort(null);


var eventObj = {

  'click': function(d, i, j) {
    debugger
    var current = this;
    var thisPath = d3.select(this);
    var clicked = thisPath.classed('clicked');
    var arcs = svg.selectAll(".arc").filter(function(el) {
      return this;
    });


    if (clicked) {
      thisPath.classed('clicked', !clicked);

    } else {
      thisPath.classed('clicked', !clicked);

    }


    selectedArcs = svg.selectAll('.clicked').filter(function(el) {
      return this
    });
    console.log(selectedArcs)
      //thisPath.classed('clicked', !clicked);
    if (selectedArcs[0].length > 0) {
      getLabel(selectedArcs[0]);
      arcs.style('opacity', 0.3);
      selectedArcs.style('opacity', 1);
    } else {
      getLabel(selectedArcs[0]);
      arcs.style('opacity', 1);
    }
  }


};

var pathAnim = function(path, dir) {
  switch (dir) {
    case 0:
      path.transition()
        .duration(500)
        .ease('bounce')
        .attr('d', d3.svg.arc()
          .innerRadius((radius - 100))
          .outerRadius(radius - 50)
        );
      break;

    case 1:
      path.transition()
        .attr('d', d3.svg.arc()
          .innerRadius((radius - 100))
          .outerRadius((radius - 50) * 1.08)
        );
      break;
  }
}

var arc = d3.svg.arc()
  .innerRadius(radius - 100)
  .outerRadius(function() {
    return (d3.select(this).classed('clicked')) ? (radius - 50) * 1.08 : (radius - 50);
  });

var svg = d3.select("#chart").append("svg")
  .attr("width", width)
  .attr("height", height)
  .append("g")
  .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

var paths = svg.selectAll("path")
  .data(pie(dataset.apples));



paths
  .transition()
  .duration(1000)
  .attr('d', arc);

paths.enter()
 ...