Question

我正在使用Dimensional Charting javascript库dc.js创建一个多线图，它基于d3和crossfilter。我是dc.js library.i的新手。我正在尝试使用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 %}

Answer 1

将尺寸视为您希望沿X轴看到的值以及将X-axis上的任何一个坐标的数据组合在一起成为单个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。

如何使用dc.js创建多线图表

1 个答案: