如何使用dc.js在饼图中放置数据范围？ [英] How to put data ranges in piecharts using dc.js?
问题描述
我有一个年龄饼图，当前在数据集中每个年龄段都有饼图。由于年龄范围很广，因此饼图中会形成许多薄片。我想将其设置为一个范围，例如一个切片应显示0-18，另一个切片应显示19-30，依此类推。我该怎么办？
I have a pie chart for age, which currently has pie slices for every age there in the data set. Since the age range is wide, numerous thin slices are formed in the pie chart. I want to make it as a range, like one slice should show 0-18, another 19-30, and so on. How can I do this?
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="bower_components/dcjs/dc.css">
<link rel="stylesheet" href="bower_components/leaflet/dist/leaflet.css">
<script src="bower_components/d3/d3.min.js"></script>
<script src="bower_components/crossfilter2/crossfilter.min.js"></script>
<script src="bower_components/dcjs/dc.js"></script>
<!--THE FOLLOWING META IS IMPORTANT, OTHERWISE THERE MIGHT BE A PROBLEM WITH SOME CHARACTERS-->
<meta http-equiv="content-type" content="text/html; charset=UTF8">
<!--CDN FOR JQUERY-->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
</head>
<body>
<div id="map">
<a class="reset" href="javascript:usChart.filterAll();dc.redrawAll();" style="display: none;">reset</a>
<span class="reset" style="display: none;"> | Current filter: <span class="filter"></span></span>
<div class="clearfix"></div>
</div>
<div id="pie-gender">
<a class="reset" href="javascript:usChart.filterAll();dc.redrawAll();" style="display: none;">reset</a>
<span class="reset" style="display: none;"> | Current filter: <span class="filter"></span></span>
<div class="clearfix"></div>
</div>
<div id="pie-age">
<a class="reset" href="javascript:usChart.filterAll();dc.redrawAll();" style="display: none;">reset</a>
<span class="reset" style="display: none;"> | Current filter: <span class="filter"></span></span>
<div class="clearfix"></div>
</div>
<div>
<a href="javascript:dc.filterAll(); dc.renderAll();">Reset All</a>
</div>
<script type="text/javascript">
d3.csv("data/gender.csv", function (data) {
d3.json("data/us-states.json", function (json){
// set up crossfilter on the data.
var ndx = crossfilter(data);
// set up the dimensions
var stateDim = ndx.dimension(function (d) { return d.state; });
var genderDim = ndx.dimension(function(d) { return d.gender; });
var ageDim = ndx.dimension(function(d) { return d.age; });
//filtering age ranges
var age_0_18 = ageDim.filter([0,19]);
var age_19_30 = ageDim.filter([19,31]);
var age_31_60 = ageDim.filter([31,61]);
var age_61_101 = ageDim.filter([61,101]);
// set up the groups/values
var state = stateDim.group();
var gender = genderDim.group();
//var age = ageDim.group();
var age1 = age_0_18.group();
var age2 = age_19_30.group();
var age3 = age_31_60.group();
var age4 = age_61_101.group();
// the different charts - options are set below for each one.
var pieGender = dc.pieChart('#pie-gender');
var pieAge = dc.pieChart('#pie-age')
var usmap = dc.geoChoroplethChart("#map");
//create pie to show gender
pieGender
.width(180)
.height(180)
.radius(80)
.dimension(genderDim)
.group(gender)
.renderLabel(true)
.innerRadius(10)
.transitionDuration(500)
//.colorAccessor(function (d, i) { return d.value; });
//below is how to decide the colours for pie slices
.colors(d3.scale.ordinal().range([ '#14CAFF', '#4646FF']));
//creating pie to show age
pieAge
.width(180)
.height(180)
.radius(80)
.dimension(ageDim)
.group(age1,age2,age3,age4)
.renderLabel(true)
.innerRadius(10)
.transitionDuration(500)
.colorAccessor(function (d, i) { return d.value; });
//display US map
usmap
.width(900)
.height(500)
.dimension(stateDim)
.group(state)
.colors(["rgb(20,202,255)","rgb(70,70,255)"])
.overlayGeoJson(json.features, "name", function (d) { return d.properties.name; })
// at the end this needs to be called to actually go through and generate all the graphs on the page.
dc.renderAll();
});
});
</script>
</body>
我尝试使用过滤器，然后分组，但结果保持不变。我认为程序可能是错误的。
I tried using filter and then grouping, but the result remained the same. I think the procedure is wrong maybe.
任何帮助将不胜感激。谢谢。
Any help would be greatly appreciated. Thanks.
推荐答案
我敢肯定我已经看过很多这样的例子，但是我找不到快速搜索。
I'm sure I've seen a lot of examples of this, but I couldn't find any in a quick search.
您将要使用组的 groupValue 函数，以将年龄归入所需类别。这与舍入值或进行任何其他分类的方法完全相同：
You'll want to use the group's groupValue function to put ages into the categories you want. This is exactly the same way you would round values down or do any other categorization:
var ageGroup = ageDim.group(function(v) {
if(v < 19) return "18 or under";
else if(v < 30) return "19-29";
else if(v < 30) return "30-59";
else return "over 60";
});
请注意， dimension.filter（）只是返回维度并更改整个交叉过滤器的过滤器，因此上面的所有组将是同一组，只有最后一个过滤器将采用。
Note that dimension.filter() just returns the dimension and changes the filters for the entire crossfilter, so all of your groups above would be the same group, and only the last filter would take.
这篇关于如何使用dc.js在饼图中放置数据范围？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
