[英]Using d3.nest to create a pie chart
我有各種各樣的數據,我用它來創建一個圓環圖。 我想使用數據的細分制作餅圖,我使用 d3.nest 獲取數據細分我擁有的數據(它目前分為 3 個類別:nest 將其分解為 129 個)。 基本上,我有基於獲得獎牌的奧運數據,我想將互動數據細分為獲得獎牌的運動。
我只是不確定如何使用嵌套數據來創建餅圖,特別是如果鍵是可變的。 我將包括我對圓環圖的實現。
var pie = d3.pie();
// color based on medal awarded
// order: gold, silver, bronze
var color = d3.scaleOrdinal()
.range(['#e5ce0c', '#e5e4e0', '#a4610a']);
var arcs = d3.select(svg).selectAll("g.arc")
.data(pie(data))
.enter()
.append("g")
.attr("class", "arc")
.attr("transform", "translate(" + (w/2) + "," + ((h-25)/2) + ")");
arcs.append("path")
.attr("fill", function(d, i) {
return color(i);
})
.attr("d", arc)
.attr("stroke", "white")
.style("stroke-width", "0.5px")
.on('mouseover', function(d) {
d3.select(this).attr('opacity', .7);
})
.on('mouseleave', function(d) {
d3.select(this).attr('opacity', 1);
});
// title
d3.select(svg).append('text')
.attr('x', function(d) {
return ((w/2) - 85);
})
.attr('y', '20')
.text(function(d) {
return ('Medal breakdown for ' + country);
})
.attr('font-size', '16px');
arcs.append("text")
.attr("transform", function(d) {
return "translate(" + arc.centroid(d) + ")";
})
.attr("text-anchor", "middle")
.text(function(d) {
return d.value;
});
您能確認這是您擁有的數據格式嗎?
請找到下面的代碼,如果您有任何疑問,請告訴我。
var w = 400; var h = 400; var r = h/2; var color = d3.scale.category20c(); var data = [ {name:"football", medal:1}, {name:"hockey", medal:2}, {name:"cricket", medal:3}, {name:"tennis", medal:4}, {name:"table tennis", medal:5}, ]; var vis = d3.select('#chart').append("svg:svg").data([data]).attr("width", w).attr("height", h).append("svg:g").attr("transform", "translate(" + r + "," + r + ")"); var pie = d3.layout.pie().value(function(d){return d.medal;}); // declare an arc generator function var arc = d3.svg.arc().outerRadius(r); // select paths, use arc generator to draw var arcs = vis.selectAll("g.slice").data(pie).enter().append("svg:g").attr("class", "slice"); arcs.append("svg:path") .attr("fill", function(d, i){ return color(i); }) .attr("d", function (d) { // log the result of the arc generator to show how cool it is :) return arc(d); }); // add the text arcs.append("svg:text").attr("transform", function(d){ d.innerRadius = 0; d.outerRadius = r; return "translate(" + arc.centroid(d) + ")";}).attr("text-anchor", "middle").text( function(d, i) { return data[i].name;} );
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.15/d3.min.js"></script> <div id="chart"></div>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.