JSFiddle - React, Tailwind, and code Playground

by HemalathaThanigaivel

HTML

<script src="http://d3js.org/d3.v4.min.js" charset="utf-8"></script>

JavaScript

for(let i=1; i< 5; i++){
	buildCharts("viz"+i)
}


function buildCharts(id){
d3.edge = {};

d3.edge.donut = function module() {

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

	var color =  d3.scaleOrdinal(['#9a88bb', '#e83c35', '#96c851', '#f3863a', '#01a356']);



   var dispatch = d3.dispatch("customHover");
   function graph(_selection) {
       _selection.each(function(_data) {	
			var pie = d3.pie()
		    	.sort(null);
			
			var arc = d3.arc()
				.innerRadius(radius - 80)
				.outerRadius(radius - 20);
        
			var arcIn = d3.arc()
				.innerRadius(0)
				.outerRadius(radius - 85)
        .startAngle(Math.PI/2)
        .endAngle(Math.PI * 1.5);
        
      var svg = d3.select(this).select("svg > g");
			if (svg.empty()){
				 svg = d3.select(this).append("svg")
			    	.attr("width", width)
			    	.attr("height", height)
			    	.append("g")
			    	.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
			}
      
        svg.append("path")
        	.attr("class", "arc-cost")
          .style("fill","none")
        	.attr("d", arcIn);
          
        svg.append("text")
       		.attr("class","totalCost");
          
        svg.append("text")
       		.attr("class","totalCostValue");  
          
        svg.append("text")
       		.attr("class","totalConsm");    
         
       svg.append("text")
       		.attr("class","totalConsmValue");  
          
      var arcCostBox = svg.select(".arc-cost").node().getBBox(); 
      //console.log(arcCostBox)
        svg.select(".totalCost")
          		.attr("x", (arcCostBox.width/2)+arcCostBox.x)
              .attr("y",40)
              .style("alignment-baseline", "central")
              .style("text-anchor", "middle")
              .style("font-size", "12px")
              .style("fill", "white")
              .text("Total Charge");
              
        svg.select(".totalCostValue")
          		.attr("x", (arcCostBox.width/2)+arcCostBox.x)
      ...