d3 中的求和和数据操作问题答案

【问题标题】：Issue with summing and data manipulation in d3d3 中的求和和数据操作问题
【发布时间】：2020-05-27 02:02:44
【问题描述】：

我有一个数据集，我正在尝试在 js.D3 中使用，但我正在苦苦挣扎。

数据集具有以下属性：

工作机会（国际）
城市（字符串）
日期（日期时间）
行业（字符串）
大学毕业生（布尔值）

我想按月汇总城市收到的所有工作机会，但由于某种原因，我遇到了一个错误。

首先我做了以下操作以确保我有干净的数据（即没有丢失记录等）：

const cleanJobData = data.filter(d=> d.city !=="" && d.dateTime !=="" && d.jobOffer !== "" && d.jobOffer!== 0)

然后我尝试使用d3.rollup 按城市汇总工作机会：

const jobOffersByMonth = d3.rollup(cleanJobData,
                                           fcm => d3.sum(fcm, d=> d.jobOffer),
                                           d => d.dateTime.getMonth(), city => city.city);

现在，这给了我一张月份地图，其中包含按城市划分的相应工作机会总数。我现在想按每个城市的报价数量从大到小对其进行排序。如果我尝试使用d3.sort()，我会收到d3.sort 不是函数的错误。我在这里做错了什么？

我也尝试使用组函数const jobOffersByMonth = d3.group(cleanJobData, d => d.dateTime.getMonth(), v => v.city, fcm => d3.sum(fcm, v => v.jobOffers))，但收到错误：T is not iterable

【问题讨论】：

标签： javascript d3.js

【解决方案1】：

您能否检查以下代码是否满足您的要求。

const data = [{
    jobOffer: 23,
    city: 'mumbai',
    dateTime: new Date(2014, 1, 1),
    industry: 'aa',
  },
	{
    jobOffer: 23,
    city: 'mumbai',
    dateTime: new Date(2014, 2, 2),
    industry: 'aa',
  },
  {
    jobOffer: 23,
    city: 'delhi',
    dateTime: new Date(2012, 1, 1),
    industry: 'aa',
  },
  {
    jobOffer: 23,
    city: 'delhi',
    dateTime: new Date(2011, 2, 2),
    industry: 'aa',
  },
  {
    jobOffer: 23,
    city: 'pak',
    dateTime: new Date(2013, 1, 1),
    industry: 'aa',
  },
		  {
    jobOffer: 23,
    city: 'delhi',
    dateTime: new Date(2011, 2, 2),
    industry: 'aa',
  },
]

const cleanJobData = data.filter(d => d.city !== "" && d.dateTime !== "" && d.jobOffer !== "" && d.jobOffer !== 0);

var nested_data = d3.nest()
  .key(function(d) {
    return d.dateTime.getMonth();
  })
	.key(function(d) {
		return d.city;
	})
  .rollup(function(leaves) {
    return d3.sum(leaves, function(d) {
      return d.jobOffer;
    })
  })
  .entries(cleanJobData)
	.map((data) => {
		return data.values.sort((a,b) => b.value - a.value);
	})


console.log(nested_data)

&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.4.3/d3.min.js"&gt;&lt;/script&gt;

【讨论】：

这不是按月计算的。内部是正确的，但不幸的是不是按月
我已经更新了当前的代码，你可以查看一下。我希望它能满足您的要求。

【解决方案2】：

我相信 d3.sort 正在尝试在 d3 上使用 Array sort 函数，这不是 Array，因此，这是真的：d3.sort is not a function。

您必须在jobOffersByMonth 上使用sort（在将其从Map 转换为Array 之后，这是执行rollup 后返回的内容）并创建一个适当的函数以传递给它，也许利用d3 的ascending 或descending，就像这个用户在这里的回答：https://stackoverflow.com/a/25168203/1168004 或

// given jobOffersByMonth looks something like:
// Map {
//      "{MONTH_NAME}" => int
// }
// we must first convert it into an Array to sort it 
// using Array.from(jobOffersByMonth) or [...jobOffersByMonth]

[...jobOffersByMonth].sort(function(x, y){
   return d3.ascending(x[1], y[1]); // could alternatively be descending
});

【讨论】：