pie highlight

by anoopsuda

HTML

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

</div>

CSS

.chart {
    background: #eee;
    padding: 3px;
}

.chart div {
  width: 0;
  transition: all 1s ease-out;
  -moz-transition: all 1s ease-out;
  -webkit-transition: all 1s ease-out;
}

.chart div {
  font: 10px sans-serif;
  background-color: steelblue;
  text-align: right;
  padding: 3px;
  margin: 5px;
  color: white;
  box-shadow: 2px 2px 2px #666;
}

.bar {
  fill: orange;
}

.bar:hover {
  fill: red;
}
rect.background {
  fill: white;
}

.axis {
  shape-rendering: crispEdges;
}

.axis path,
.axis line {
  fill: none;
  stroke: #000;
}

tooltip {
  position: absolute;
  text-align: center;
  width: 120px;
  height: 45px;
  padding: 2px;
  font: 12px sans-serif;
  background: lightsteelblue;
  border: 0px;
  border-radius: 8px;
  pointer-events: none;
}

bar {
    fill: #8CD3DD;
  }
  
bar:hover {
    fill: #F56C4E;
  }

/* .tick:nth-child(3n) text {
    visibility: hidden;
} */

.d3-tip {
  line-height: 1;
  font-weight: bold;
  padding: 12px;
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  border-radius: 2px;
}

/* Creates a small triangle extender for the tooltip */
.d3-tip:after {
  box-sizing: border-box;
  display: inline;
  font-size: 10px;
  width: 100%;
  line-height: 1;
  color: rgba(0, 0, 0, 0.8);
  content: "\25BC";
  position: absolute;
  text-align: center;
}

/* Style northward tooltips differently */
.d3-tip.n:after {
  margin: -1px 0 0 0;
  top: 100%;
  left: 0;
}

Creates a small triangle extender for the tooltip
.d3-tip:after {
  box-sizing: border-box;
  display: inline;
  font-size: 10px;
  width: 100%;
  line-height: 1;
  color: rgba(0, 0, 0, 0.8);
  content: "\25BC";
  position: absolute;
  text-align: center;
}

Style northward tooltips differently
.d3-tip.n:after {
  margin: -1px 0 0 0;
  top: 100%;
  left: 0;
}


svg text.label {
  fill:#ff0000;
  font: 25px; 
  text-anchor: middle; 
  font-weight: 400;
  text-anchor: middle;
  font-size: 125%;
  text-anchor: start;
}


path {
    stroke: steelblue;
    stroke-width: 2;
  /*  ...

JavaScript

var toCSV = [
  {
    "name": "SEASONAL_LYQ1",
    "code": "SEASONAL_LYQ1",
    "parent": "SEASONAL_POP",
    "value": "0",
    "label": "LYQ1",
    "children": []
  },
  {
    "name": "SEASONAL_LYQ2",
    "code": "SEASONAL_LYQ2",
    "parent": "SEASONAL_POP",
    "value": "10",
    "label": "LYQ2",
    "children": []
  },
  {
    "name": "SEASONAL_LYQ3",
    "code": "SEASONAL_LYQ3",
    "parent": "SEASONAL_POP",
    "value": "16",
    "label": "LYQ3",
    "children": []
  },
  {
    "name": "SEASONAL_LYQ4",
    "code": "SEASONAL_LYQ4",
    "parent": "SEASONAL_POP",
    "value": "10",
    "label": "LYQ4",
    "children": []
  },
  {
    "name": "SEASONAL_CYQ1",
    "code": "SEASONAL_CYQ1",
    "parent": "SEASONAL_POP",
    "value": "0",
    "label": "CYQ1",
    "children": []
  },
  {
    "name": "SEASONAL_CYQ2",
    "code": "SEASONAL_CYQ2",
    "parent": "SEASONAL_POP",
    "value": "10",
    "label": "CYQ2",
    "children": []
  },
  {
    "name": "SEASONAL_CYQ3",
    "code": "SEASONAL_CYQ3",
    "parent": "SEASONAL_POP",
    "value": "16",
    "label": "CYQ3",
    "children": []
  },
  {
    "name": "SEASONAL_CYQ4",
    "code": "SEASONAL_CYQ4",
    "parent": "SEASONAL_POP",
    "value": "10",
    "label": "CYQ4",
    "children": []
  }
];
 var margin = {top: 30,right: 20,bottom: 20,left: 20 },
	      		 width = 400,
	      		 height = 400;
	        	 var radius = Math.min(width, height) / 4;
	             var donutWidth = 75; 
	             var color = d3.scaleOrdinal(d3.schemeCategory20);
	             var count = 0;
	            // var svg = d3.select("div#donuts").append("svg")
	             var svg = d3.select("#charts").append("svg")
	                         .attr('width', width)
	                         .attr('height', height)
	                         .append('g')
	                         .attr('transform', 'translate(' + (width / 2) +
	                         ',' + (height / 2) + ')');
	             
	             
				  var arc = d3.arc()
				    ...