D3.js donut chart
HTML
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://d3js.org/d3.v3.min.js"></script>
<div id="holder"></div>
CSS
body {
background: #eeeeee;
}
#holder {
overflow:hidden;
}
.node {
cursor: pointer;
stroke: #3182bd;
stroke-width: 1.5px;
}
.link {
fill: none;
stroke: #9ecae1;
stroke-width: 1.5px;
}
JavaScript
$(document).ready(function () {
var init = function (selector, root) {
var width = 960,
height = 500,
root;
var tick = function () {
link.attr("x1", function (d) {
return d.source.x;
})
.attr("y1", function (d) {
return d.source.y;
})
.attr("x2", function (d) {
return d.target.x;
})
.attr("y2", function (d) {
return d.target.y;
});
node.attr("cx", function (d) {
return d.x;
})
.attr("cy", function (d) {
return d.y;
});
labels.attr("x", function (d) {
return d.x;
})
.attr("y", function (d) {
return d.y;
});
}
var force = d3.layout.force()
.size([width, height])
.linkDistance(30)
.charge(-520)
.on("tick", tick);
var svg = d3.select(selector).append("svg")
.attr("width", width)
.attr("height", height);
var link = svg.selectAll(".link"),
node = svg.selectAll(".node"),
labels = svg.selectAll(".labels");
var update = function () {
var nodes = flatten(root),
links = d3.layout.tree().links(nodes);
// Restart the force layout.
force.nodes(nodes)
.links(links)
.start();
// Update the links…
link = link.data(links, function (d) {
return d.target.id;
});
// Exit any old links.
link.exit().remove();
// Enter any new links.
link.enter().insert("line", ".node")
.attr("class", "link")
.attr("x1", function (d) {
return...