JSFiddle - React, Tailwind, and code Playground

by HemalathaThanigaivel

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.13.0/d3.min.js"></script>

JavaScript

var dataset = {
  apples: [53245],
  oranges: [53245, 28479, 19697, 24037, 40245, 34234],
  lemons: [53245, 28479, 19697, 24037, 40245, 34234],
 // pears: [53245, 28479, 19697, 24037, 40245, 34234],
 // banana: [53245, 28479, 19697, 24037, 40245, 34234],
 // pineapples: [53245, 28479, 19697, 24037, 40245, 34234],
};

var width = 500,
    height = 500,
    cwidth = 80;


// d3.v3
/* 
var color = d3.scale.category20();
var pie = d3.layout.pie().sort(null);
var arc = d3.svg.arc();
*/

// d3.v4
var color = d3.scaleOrdinal(d3.schemeCategory10);
var pie = d3.pie().sort(null);
var arc = d3.arc();

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

var gs = svg.selectAll("g").data(d3.values(dataset)).enter().append("g");
var path = gs.selectAll("path")
		.data(function(d, i) {
    console.log(d,i)
      return pie(d).map(function(item) {
    //  console.log(item)
        return { data: item, parentIndex: i };
      });
    })
    .enter().append("path")
    .attr("fill", function(d, i) { return color(i); })
    .attr("d", function(d, i) { 
    if(d.parentIndex == 0){
    /* return arc .innerRadius(0)
    .outerRadius(70)
    .startAngle(270 * (Math.PI/180))
    .endAngle(90 * (Math.PI/180))  (d.data) */
   return arc
       /*  .startAngle(270 * (Math.PI/180))
                .endAngle(90 * (Math.PI/180)) */
        .innerRadius(cwidth*d.parentIndex)
        .outerRadius(cwidth*(d.parentIndex + 1))(d.data);
        }
    if(d.parentIndex == 1){
    console.log(d)
      return arc
        /* .startAngle(0 * (Math.PI/180))
                .endAngle(360 * (Math.PI/180)) */
        .innerRadius(10+ cwidth*d.parentIndex)
        .outerRadius(cwidth*(d.parentIndex+1))(d.data);
        }
   if(d.parentIndex == 2){
        return arc
       /*  .startAngle(0 * (Math.PI/180))
                .endAngle(360 * (Math.PI/180)) */
       ...