从 CSV 分组数据（D3.js 和 Chart.js）答案

【问题标题】：Group data from CSV (D3.js & Chart.js)从 CSV 分组数据（D3.js 和 Chart.js）
【发布时间】：2020-11-17 14:59:31
【问题描述】：

我有一个这样的 csv 文件：

id,Annee,Origine,Pax_Total
1,2014,AJACCIO,27494
2,2019,AJACCIO,57525
3,2014,ANGERS,1724
4,2019,ANGERS,4725
...

我想对每个 Origine 进行分组并获得 Pax_Total 的总和。目的是用 Chart.js 创建一个条形图。

这是我的代码：

d3.csv("https://raw.githubusercontent.com/gflowiz/mapathon/master/DGAC_flux.csv")
.then(makeChart);

function makeChart(ville) {
  
  var sumPaxTotal = d3.rollups(ville, v => d3.sum(v, d => d.Pax_Total), d => d.Origine)
  var villeOrigine =  d3.groups(ville, d => d.Origine)
  
  var ctx = document.getElementById('chart').getContext('2d');
  var chart = new Chart(ctx, {
      type: 'horizontalBar',
      option:{
          maintainAspectRatio: true,
          legend: {
              display: false
            }
      },
      data: {
        labels: villeOrigine,
        datasets: [
          {
            data: sumPaxTotal,
            backgroundColor: '#F15F36'
          }
        ]
      }
    });
console.log(sumPaxTotal)
}

这是 sumPaxTotal 的控制台日志。

我认为存在“数组”问题，经过大量研究，我还不清楚......

感谢您的帮助。

【问题讨论】：

你期望什么输出？
一个条形图，在 x 轴上带有 Origine（红色），在 y 轴上带有数字（蓝色）。
你期望什么数据格式？
起源 -> 字符串 | sumPaxTotal -> 整数

标签： javascript csv d3.js chart.js

【解决方案1】：

使用Arrays.map()，可以这样做：

data: {
  labels: sumPaxTotal.map(v => v[0]),
  datasets: [{
    label: 'DGAC-Flux',
    data: sumPaxTotal.map(v => v[1]),
    backgroundColor: '#F15F36'
  }]
}

请在下面查看您修改后的代码：

d3.csv("https://raw.githubusercontent.com/gflowiz/mapathon/master/DGAC_flux.csv").then(makeChart);

function makeChart(ville) {
  let sumPaxTotal = d3.rollups(ville, v => d3.sum(v, d => d.Pax_Total), d => d.Origine);
  let chart = new Chart('chart', {
    type: 'horizontalBar',
    data: {
      labels: sumPaxTotal.map(v => v[0]),
      datasets: [{
        label: 'DGAC-Flux',
        data: sumPaxTotal.map(v => v[1]),
        backgroundColor: '#F15F36'
      }]
    },
    options: {
      legend: {
        display: false
      }
    }
  });
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/6.2.0/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
<canvas id="chart" height="250"></canvas>

【讨论】：