Question

我正在制作一个D3条形图，使用JSON文件按位置显示重量输出。我正在阅读的一个JSON文件包含了一整天添加到JSON文件中的许多数据条目。 JSON文件中的每个条目都包含ID，权重，位置和其他无关信息。以下是JSON文件的基本格式格式：

[{"id":1,"weight":51.2,"location":"Airport", ...},{"id":2,"weight":89.2,"location":"Uptown", ...},{"id":3,"weight":31.8,"location":"Airport", ...}, ....,{"id":90,"weight":96.8,"location":"Monroe", ...}]

我理解如何使条形图完美无缺，我的问题是堆叠每个位置的重量，以便每个位置仅在X轴上显示一次，并且每个位置的总重量显示为相应的酒吧。任何帮助是极大的赞赏。

Answer 1

实际上你需要准备你的数据。浏览它并总结与每个不同位置相对应的所有值。

可以通过d3自己的方法或某些第三方库来执行，例如lodash或underscore。

var data = [
    {"id":1,"weight":51.2,"location":"Airport"},
    {"id":2,"weight":89.2,"location":"Uptown"},
    {"id":3,"weight":31.8,"location":"Airport"},
    {"id":90,"weight":96.8,"location":"Monroe"}
];

function handleWithD3(dataload) {
  /* group data be value of 'location' field */
  var d3grouped = d3.nest()
    .key(function(d) {return d.location;})
    .entries(data);

  /* create new array with items extended with 'sum' value */
  var result = d3grouped.map(function(item) {
    /* calculate sum of weights for every item in array */
    item.sum = d3.sum(item.values, function(d) { return d.weight; });
    return item;
  });

  return result;
}

function handleWithUnderscore(dataload) {
  var _grouped = _.groupBy(data, function (item) { return item.location; });

  var result = _.map(_grouped, function(dataBlock, key, list) {
    return {
      key: key,
      values: dataBlock,
      sum: _.reduce(_.pluck(dataBlock, 'weight'), function(prev, next) { return prev + next; }, 0)
    };
  });

  return result;
}

document.getElementById('d3').innerHTML = JSON.stringify(handleWithD3(data));
document.getElementById('underscore').innerHTML = JSON.stringify(handleWithUnderscore(data));

#d3 {
  color: blue;
}
#underscore {
  color: green;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<div id="d3"></div>
<div id="underscore"></div>

制作一个按JSON字符串排序的D3条形图？

1 个答案: