Круговые диаграммы

Последнее обновление: 1.11.2015

Круговые диаграммы (pie charts) представляют отображение данных в виде отдельных секторов в пределах окружности. В D3.js каждый сектор представлен объектом арки, которая генерируется с помощью метода d3.svg.arc(). Например, у нас есть данные по доли браузеров и нам надо эти данные отобразить:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://d3js.org/d3.v3.min.js"> </script>
<style>
body {
	font: 13px Verdana;
}
.arc path {
	stroke: #000;
}
</style>
<body>

<script type="text/javascript">
var height = 500, 
    width = 500, 
	margin=30,
	data=[
		{browser: "Google Chrome", rate: 42.52},
		{browser: "Firefox", rate: 16.23},
		{browser: "Opera", rate: 12.6},
		{browser: "Yandex Browser", rate: 9.12},
		{browser: "Internet Explorer", rate: 10.56},
		{browser: "Другие", rate: 8.97}
	];
	
// функция для получения цветов
var color = d3.scale.category10();

// задаем радиус
var radius = Math.min(width - 2*margin, height- 2*margin) / 2;

// создаем элемент арки с радиусом
var arc = d3.svg.arc()
	.outerRadius(radius)
	.innerRadius(0);
	
var pie = d3.layout.pie()
	.sort(null)
	.value(function(d) { return d.rate; });

var svg = d3.select("body").append("svg")
		.attr("class", "axis")
        .attr("width", width)
        .attr("height", height)
		.append("g")
		.attr("transform", 
			"translate(" +(width / 2) + "," + (height / 2 ) + ")");
var g = svg.selectAll(".arc")
.data(pie(data))
.enter().append("g")
.attr("class", "arc");	

g.append("path")
.attr("d", arc)
.style("fill", function(d) { return color(d.data.browser); });

g.append("text")
	.attr("transform", function(d) {
		return "translate(" + arc.centroid(d) + ")"; })
	.style("text-anchor", "middle")
	.text(function(d) { return d.data.browser; });

</script>
</body>
</html>
Круговая диаграмма в D3.js

Для создания каждой отдельной арки необходимо два радиуса: внутренний и внешний.

Радиус круговой диаграммы

Внешний радиус будет равен половине ширины или высоты контейнера svg минус отступы. Внутренний радиус равен 0, поэтому дуга фактически будет представлять целый сектор, который отсекается от центра окружности:

var radius = Math.min(width - 2*margin, height- 2*margin) / 2;

var arc = d3.svg.arc()
	.outerRadius(radius)
	.innerRadius(0);

Для автоматического создания круговой диаграммы или "пирога" (pie) в D3.js предусмотрена функция d3.layout.pie():

var pie = d3.layout.pie()
	.sort(null)
	.value(function(d) { return d.rate; });

В соответствии со значением rate у каждого объекта в массиве data ему будет определяться свой сектор.

Далее надо собственно нарисовать дуги, представляющие сектора:

var g = svg.selectAll(".arc")
	.data(pie(data))
	.enter().append("g")
	.attr("class", "arc");	

g.append("path")
	.attr("d", arc)
	.style("fill", function(d) { return color(d.data.browser); });
g.append("text")
	.attr("transform", function(d) {
		return "translate(" + arc.centroid(d) + ")"; })
	.style("text-anchor", "middle")
	.text(function(d) { return d.data.browser; });

Но в качестве данных здесь будет использоваться не массив data, а результат вышеопределенной функции pie над этим массивом. Поэтому при определении текста на секторе используется не d.browser, а d.data.browser.

Чтобы определить место для метки текста, здесь применяется функция arc.centroid(), которая вычисляет центральную точку между внутренним и внешним радиусом.

НазадСодержаниеВперед

Помощь сайту
Юмани:
410011174743222
Перевод на карту
Номер карты:
4048415020898850