CRAN

by tsayen

HTML

<script src="http://d3js.org/d3.v3.min.js"></script>

CSS

rect {
    fill: none;
    pointer-events: all;
}
.node {
    fill: #000;
}
.link {
    stroke: #999;
}

JavaScript

var width = 800,
    height = 600,
    radius = 30;

var nodes = [];
for(var i = 0; i < 10; i++) {
 	var node = {name: 'node'+i, children: [{name: 'hardware'},{name: 'blah'}, {name: 'dsps'}]}; 
    nodes.push(node);
}

var force = d3.layout.force()
    .size([width, height])
    .nodes(nodes)
    .linkDistance(100)
    .charge(-300)
    .on("tick", tick);

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);

svg.append("rect")
    .attr("width", width)
    .attr("height", height);

var node = svg.selectAll(".node"),
    link = svg.selectAll(".link");

restart();

function tick() {
    node.attr("transform", function (d) {
        return "translate(" + d.x + "," + d.y + ")"
    });
}

function restart() {
    node = node
        .data(nodes)
		.enter()
        .append("g")
        .attr("class", "node");
    
    var partition = d3.layout.partition()
    .sort(null)
    .size([2 * Math.PI, radius * radius])
    .value(function(d) { return 1; });

var arc = d3.svg.arc()
    .startAngle(function(d) { return d.x; })
    .endAngle(function(d) { return d.x + d.dx; })
    .innerRadius(function(d) { return Math.sqrt(d.y); })
    .outerRadius(function(d) { return Math.sqrt(d.y + d.dy); });

  node.data(nodes).selectAll("path")
      .data(partition.nodes)
    .enter().append("path")
      .attr("d", arc)  	  
      .style("stroke", "#fff")
      .style("fill", getColor)
      .style("fill-rule", "evenodd")
      .each(stash);

    force.start();
}

function getColor(d) {
    return "#000";
}

function stash(d) {
  d.x0 = d.x;
  d.dx0 = d.dx;
}