我正在使用基于d3和crossfilter的Dimensional Charting javascript库dc.js制作多线图。我是dc.js库中的新手。我试图使用csv文件显示多线图。我无法理解如何按照csv格式创建多线图。
我的csv栏格式是
Age_19_Under Age_19_64 Age_65_84 Age_85_and_Over
26.9 62.3 9.8 0.9
23.5 60.3 14.5 1.8
24.3 62.5 11.6 1.6
24.6 63.3 10.9 1.2
24.5 62.1 12.1 1.3
24.7 63.2 10 2.2
25.6 58.5 13.6 2.4
24.1 61.6 12.7 1.5
24.8 59.5 13.5 2.2
我正在尝试添加以下代码：
{% extends "base.html" %}
{% load staticfiles %}
{% block content %}
<head>
<link href="{% static 'css/dc.css' %}" rel="stylesheet" media="screen">
<link href="{% static 'css/example-styles.css' %}" rel="stylesheet" media="screen">
</head>
<div class="container" style="margin-top: 140px">
<div class="col-lg-12" id="chart-row-Poverty1">
</div>
</div>
<script type="text/javascript" src="{% static 'js/d3.js' %}"></script>
<script type="text/javascript" src="{% static 'js/crossfilter.js' %}"></script>
<script type="text/javascript" src="{% static 'js/dc.js' %}"></script>
<script type="text/javascript" src="{% static 'js/bootstrap.min.js' %}"></script>
<script type="text/javascript" src="{% static 'js/d3.js' %}"></script>
<script type="text/javascript" src="{% static 'js/index.js' %}"></script>
<script type="text/javascript">
var lineChart1=dc.compositeChart("#chart-row-Poverty1");
var g;
d3.csv("{% static 'sampledata/helthdata.csv' %}", function(error, experiments) {
var dateFormat = d3.time.format("%Y");
var numberFormat = d3.format(",f");
var ndx = crossfilter(experiments);
var all = ndx.groupAll();
var runDimension = ndx.dimension(function(d) {return [+d.Age_19_Under, +d.Age_19_64, +d.Age_65_84,+d.Age_85_and_Over]; });
var runGroup = runDimension.group().reduceSum(function(d) { return 1; });
lineChart1.width(1160)
.height(250)
.margins({top: 10, right: 10, bottom: 20, left: 40})
.dimension(runDimension)
.group(runGroup)
.transitionDuration(500)
.elasticY(true)
.brushOn(false)
.valueAccessor(function (d) {
return d.value;
})
.title(function(d){
return "\nNumber of Povetry: "+d.key;
})
.x(d3.scale.linear().domain([4, 27]))
.xAxis();
dc.renderAll();
});
</script>
{% endblock %}
可以将维度视为要在X轴上看到的值，而将组看作是要如何将X轴上任何一个坐标的数据组合到一个Y值中。这样，一组代表多线图上一行的数据。一旦解决了该问题，就需要在dc.js中创建N + 1个图表。也就是说，对于每个要查看的图形，一个lineChart，然后一个compositeChart，将它们全部收集在一起。各个lineCharts可能非常简单，因为它们将从其所包含的CompositeChart继承许多属性。
直到我完成下面的代码，我才注意到您为X轴设置的实际值，并意识到我认为我可能误解了您真正想做的事情。对于那个很抱歉。希望它仍然可以为您说明基本思想。
var experiments = [
{ Run: 1, Age_19_Under: 26.9, Age_19_64: 62.3, Age_65_84: 9.8, Age_85_and_Over: 0.9 },
{ Run: 2, Age_19_Under: 23.5, Age_19_64: 60.3, Age_65_84: 14.5, Age_85_and_Over: 1.8 },
{ Run: 3, Age_19_Under: 24.3, Age_19_64: 62.5, Age_65_84: 11.6, Age_85_and_Over: 1.6 },
{ Run: 4, Age_19_Under: 24.6, Age_19_64: 63.3, Age_65_84: 10.9, Age_85_and_Over: 1.2 },
{ Run: 5, Age_19_Under: 24.5, Age_19_64: 62.1, Age_65_84: 12.1, Age_85_and_Over: 1.3 },
{ Run: 6, Age_19_Under: 24.7, Age_19_64: 63.2, Age_65_84: 10, Age_85_and_Over: 2.2 },
{ Run: 7, Age_19_Under: 25.6, Age_19_64: 58.5, Age_65_84: 13.6, Age_85_and_Over: 2.4 },
{ Run: 8, Age_19_Under: 24.1, Age_19_64: 61.6, Age_65_84: 12.7, Age_85_and_Over: 1.5 },
{ Run: 9, Age_19_Under: 24.8, Age_19_64: 59.5, Age_65_84: 13.5, Age_85_and_Over: 2.2 },
];
var ndx = crossfilter(experiments);
var all = ndx.groupAll();
var runDimension = ndx.dimension(function (d) { return d.Run; });
var age19UnderGroup = runDimension.group().reduceSum(function (d) { return d.Age_19_Under; });
var age19To64Group = runDimension.group().reduceSum(function (d) { return d.Age_19_64; });
var age65To84Group = runDimension.group().reduceSum(function (d) { return d.Age_65_84; });
var age85AndOverGroup = runDimension.group().reduceSum(function (d) { return d.Age_85_and_Over; });
lineChart1.width(1160)
.height(250)
.margins({ top: 10, right: 10, bottom: 20, left: 40 })
.dimension(runDimension)
.transitionDuration(500)
.elasticY(true)
.brushOn(false)
.valueAccessor(function (d) {
return d.value;
})
.title(function (d) {
return "\nNumber of Povetry: " + d.key;
})
.x(d3.scale.linear().domain([4, 27]))
.compose([
dc.lineChart(lineChart1).group(age19UnderGroup),
dc.lineChart(lineChart1).group(age19To64Group),
dc.lineChart(lineChart1).group(age65To84Group),
dc.lineChart(lineChart1).group(age85AndOverGroup)
])
;
dc.renderAll();
请注意，我是如何在您的数据中插入“运行”属性来为维度创建统一值的。我选择整数是因为它们很容易，但是值也可以是日期，实验名称或在数据中创建一行的任何值。数据集中的值直接显示在图形中，因为我选择的维度具有所有唯一值。如果存在重复的值（例如，第10行，其中Measurement = 9，并且每个年龄段的值均为10），则给定维度值的所有数据都将通过.reduceSum（）方法进行汇总（因此，一个值在X轴上为9的34.8）。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句