JSFiddle - React, Tailwind, and code Playground

by Rajagopal CR

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script src="http://ajax.cdnjs.com/ajax/libs/json2/20110223/json2.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.4.9/d3.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone.js"></script>
<button onclick="changeStyle1()">Change Style</button>

JavaScript

var width=500;
var height=500;
var radius=800;

var svgcontainer=d3.select("body").append("svg")
								  .attr("width",width)
								  .attr("height",height)
								  .append("g").attr("id","container")
								  .attr("transform","translate(100,500)");

var json={"name":"Main","children":[{"name":"sub1"},{"name":"sub2"},{"name":"sub3"},{"name":"sub4"},{"name":"sub5"}]};

var partition=d3.layout.partition().size([Math.PI/2, radius]).value(function (d) { return d.depth; });

var node=partition.nodes(json);

var arc=d3.svg.arc()
              .startAngle(function (d) {return d.x;})
              .endAngle(function (d) { return d.x + d.dx - 0.01 / (d.depth + 2.6); })
              .innerRadius(function (d) {return radius / 5 * d.depth;})
              .outerRadius(function (d) {return radius / 5 * (d.depth + 1) - 1;});    

var paths=svgcontainer.selectAll("path")
                      .data(node)
                      .enter()
                      .append("path")
                      .attr("d",arc)
                      .style("fill","red")
                      .style("opacity", 1)
                      .style("stroke","#c8c8c8");

svgcontainer.selectAll("text")
			.data(node)
            .enter()
            .append("svg:text")
            .attr("transform", function(d) { return "translate("+arc.centroid(d)+")rotate(" + (d.x + d.dx / 2 - Math.PI / 2) / Math.PI * 180 + ")"})
            .attr("text-anchor","middle")
            .text(names);

function names(d){
    return d.name; 
}