d3.js D3V6中嵌套和组函数的等效组码是什么

wkftcu5l  于 2022-11-12  发布在  其他
关注(0)|答案(2)|浏览(136)

我是绝对新的JavaScript和D3。我有问题转换以下的D3代码从版本3到6。
数据类型:
d2.csv:

city,type,price,id
a,c,10,1
a,c,15,2
a,d,30,3
a,d,40,4
a,e,5,5
a,e,10,6
a,e,7,7
b,c,15,8
b,c,20,9
b,d,9,10
b,d,4,11
b,e,12,12
b,e,15,13

D3 V3代码:

data = d3.csv('./data/d2.csv', function (data) {
    var nestedData = d3.nest()
        .key(function (d) { return d.city; }).sortKeys(d3.descending)
        .key(function (d) { return d.type; }).sortKeys(d3.ascending)
        .sortValues(function (a, b) { return +b.price - +a.price; })
        .entries(data);
    console.log(nestedData);

})

请帮助我使用版本6

fafcakar

fafcakar1#

您可以使用this answer中的小helper函数的逻辑将d3.group返回的嵌套Map转换回d3.nest所需格式的Object。这应该适用于任何嵌套级别。
为了适应排序逻辑,在调用d3.group之前,对从CSV中获取的对象数组使用d3.ascendingd3.descending
工作示例:
第一个

67up9zun

67up9zun2#

显然,在V6d3.nestthere is no direct equivalent。我尝试了d3.group/d3.groups/d3.rollup,但没有得到完全相同的结果...
您可以改用下列程式码:

d3.csv('./data/d2.csv', function (data) {
  const nestedData = data
    .sort((a, b) => {
      if (a.city > b.city) return -1;
      if (a.city < b.city) return 1;
      if(a.type > b.type) return 1; 
      if(a.type < b.type) return -1; 
      return b.price - a.price;
    })
    .reduce((arr, item) => {
      const cityObj = arr.find(({key}) => key === item.city);
      if (!cityObj) {
        arr.push({key: item.city, values: [{key: item.type, values: [item]}]});
        return arr;
      }
      const typeObj = cityObj.values.find(({key}) => key === item.type);
      if (!typeObj) {
        cityObj.values.push({key: item.type, values: [item]});
        return arr;
      }
      typeObj.values.push(item);
      return arr;
    }, []);

  console.log(nestedData);
});

下面是我的fiddle,其中包含经过测试的代码。

相关问题