JSFiddle - React, Tailwind, and code Playground

by HemalathaThanigaivel

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.4.1/jspdf.min.js"></script>
<div id="viz"></div>

 <img src="blob:http://hema.ngpdevelopment.co.uk/be0e8c98-b878-4743-9925-6c44e46eb0fe" width=500 height=500/>

JavaScript

d3.edge = {};
var svg, width, height;
d3.edge.donut = function module() {

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

	var color =  d3.scaleOrdinal([
 	  "#A3A1FB", //PURPLE
    "#81C8FF", // blue
    "#FFA778", //ORANGE
    "#FFDA78", //YELLOW
    "#FF8373", //RED
  ]);



   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);
        
      svg = d3.select(this).select("svg > g");
			if (svg.empty()){
				 svg = d3.select(this).append("svg")
         .attr("id", "pieSVG")
			    	.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("line")
       	.attr("class", "arc-cost")
        .attr("x1", -60)
        .attr("x2", 60)
        .attr("y1", 0)
        .attr("y2", 0)
        .attr("stroke", "#778E9E")
          
        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")
             ...