You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
75 lines
2.0 KiB
75 lines
2.0 KiB
3 years ago
|
/* ------------------------------------------------------------------------------
|
||
|
|
*
|
||
|
|
* # D3.js - multiple pie charts
|
||
|
|
*
|
||
|
|
* Demo d3.js multiple pie charts setup
|
||
|
|
*
|
||
|
|
* Version: 1.0
|
||
|
|
* Latest update: August 1, 2015
|
||
|
|
*
|
||
|
|
* ---------------------------------------------------------------------------- */
|
||
|
|
|
||
|
|
$(function () {
|
||
|
|
|
||
|
|
// Initialize chart
|
||
|
|
pieMultiple('#d3-pie-multiple', 110, 10);
|
||
|
|
|
||
|
|
// Chart setup
|
||
|
|
function pieMultiple(element, radius, margin) {
|
||
|
|
|
||
|
|
|
||
|
|
// Basic setup
|
||
|
|
// ------------------------------
|
||
|
|
|
||
|
|
// Define the data as a two-dimensional array of numbers
|
||
|
|
var data = [
|
||
|
|
[11975, 5871, 8916, 2868],
|
||
|
|
[ 1951, 10048, 2060, 6171],
|
||
|
|
[ 8010, 16145, 8090, 8045],
|
||
|
|
[ 1013, 990, 940, 6907]
|
||
|
|
];
|
||
|
|
|
||
|
|
// Colors
|
||
|
|
var colors = d3.scale.category10();
|
||
|
|
|
||
|
|
|
||
|
|
// Create chart
|
||
|
|
// ------------------------------
|
||
|
|
|
||
|
|
// Insert an svg element (with margin) for each row in our dataset
|
||
|
|
var svg = d3.select(element)
|
||
|
|
.selectAll("svg")
|
||
|
|
.data(data)
|
||
|
|
.enter()
|
||
|
|
.append("svg")
|
||
|
|
.attr("width", (radius + margin) * 2)
|
||
|
|
.attr("height", (radius + margin) * 2)
|
||
|
|
.append("g")
|
||
|
|
.attr("class", "d3-arc")
|
||
|
|
.attr("transform", "translate(" + (radius + margin) + "," + (radius + margin) + ")");
|
||
|
|
|
||
|
|
|
||
|
|
// Construct chart layout
|
||
|
|
// ------------------------------
|
||
|
|
|
||
|
|
// Arc
|
||
|
|
var arc = d3.svg.arc()
|
||
|
|
.innerRadius(0)
|
||
|
|
.outerRadius(radius);
|
||
|
|
|
||
|
|
|
||
|
|
//
|
||
|
|
// Append chart elements
|
||
|
|
//
|
||
|
|
|
||
|
|
// The data for each svg element is a row of numbers (an array)
|
||
|
|
svg.selectAll("path")
|
||
|
|
.data(d3.layout.pie())
|
||
|
|
.enter()
|
||
|
|
.append("path")
|
||
|
|
.attr("d", arc)
|
||
|
|
.style("stroke", "#fff")
|
||
|
|
.style("fill", function(d, i) { return colors(i); });
|
||
|
|
}
|
||
|
|
});
|