javascript - d3.nest 返回每行的值之和

Question

我有一个这样的 csv:

name,na,profile,one,two,three,four,
uni1,eng,impact,4,5,3,1
uni1,eng,overall,10,5,3,1
uni1,fr,impact,4,5,7,1
uni1,fr,overall,20,5,7,1
uni1,ger,impact,4,5,3,1
uni1,ger,overall,18,5,18,1
uni1,eng,impact,4,5,3,1
uni2,eng,overall,4,5,3,1
uni2,fr,impact,4,5,3,30
uni2,fr,overall,4,5,3,1
uni2,ger,impact,4,5,3,1
uni2,ger,overall,4,21,3,1
uni2,spain,impact,4,5,3,1
uni2,spain,overall,4,5,3,1
uni2,spain,impact,4,20,3,1
uni2,lat,overall,4,19,3,1
uni2,lat,impact,4,5,17,1

我想计算一个 d3 嵌套，当 profile === 总体 时，它将返回每个 uni 和 na 的一二三四值的总和。

我想要一个像这样的对象数组:

array[object0{uni1{
                  eng{
                  value:230}]

我成功获得了所有具有总体值(value)的行，但我不知道如何返回这些东西......

var nestedData = d3.nest()
            .key(function(d){return (d.profile=== "Overall").forEach(d.name);})
            //.rollup(function (v) { return d3.sum(v,function(d){return (d.four*4,d.three*3,d.two*2,d.one)/100 });})
            .sortKeys(d3.ascending)
            .entries(filteredData());

        console.log("Ranked :data",nestedData);

        return nestedData;

Answer 1

您想要的结果并不完全清楚，因为您没有向我们展示您希望如何为不同的 eng 定位内部数组同样uni .

因此，这是一个解决方案(有很多)，检查控制台以查看数组的结构:

var csv = `name,na,profile,one,two,three,four,
uni1,eng,impact,4,5,3,1
uni1,eng,overall,10,5,3,1
uni1,fr,impact,4,5,7,1
uni1,fr,overall,20,5,7,1
uni1,ger,impact,4,5,3,1
uni1,ger,overall,18,5,18,1
uni1,eng,impact,4,5,3,1
uni2,eng,overall,4,5,3,1
uni2,fr,impact,4,5,3,30
uni2,fr,overall,4,5,3,1
uni2,ger,impact,4,5,3,1
uni2,ger,overall,4,21,3,1
uni2,spain,impact,4,5,3,1
uni2,spain,overall,4,5,3,1
uni2,spain,impact,4,20,3,1
uni2,lat,overall,4,19,3,1
uni2,lat,impact,4,5,17,1`;

var data = d3.csvParse(csv, function(d) {
  d.one = +d.one;
  d.two = +d.two;
  d.three = +d.three;
  d.four = +d.four;
  return d;
});

var filteredData = data.filter(function(d) {
  return d.profile === "overall"
});

var nestedData = d3.nest()
  .key(function(d) {
    return d.name;
  })
  .sortKeys(d3.ascending)
  .key(function(d) {
    return d.na
  })
  .rollup(function(v) {
    return v[0].one + v[0].two + v[0].three + v[0].four
  })
  .entries(filteredData);

console.log(nestedData)

<script src="https://d3js.org/d3.v4.min.js"></script>

PS:我知道只有我这么认为，但我从来都不是 d3.nest() 的忠实粉丝。 。我更喜欢使用纯 JavaScript 函数按照我想要的方式操作数据数组...它更加通用，您可以完全根据需要构建结果。

编辑:回答 Friday-challenge ，这是创建 OP 描述的结果的普通 JavaScript(几乎是这样，因为内部对象必须位于数组内):

var finalArray = [];

[...new Set(filteredData.map(function(d) {
    return d.name
}))].forEach(function(d) {
    var tempObj = {
        [d]: []
    };
    filteredData.filter(function(e) {
        return e.name === d;
    }).forEach(function(e) {
        tempObj[d].push({
            [e.na]: e.one + e.two + e.three + e.four
        })
    });
    finalArray.push(tempObj)
});

这是演示:

var csv = `name,na,profile,one,two,three,four,
uni1,eng,impact,4,5,3,1
uni1,eng,overall,10,5,3,1
uni1,fr,impact,4,5,7,1
uni1,fr,overall,20,5,7,1
uni1,ger,impact,4,5,3,1
uni1,ger,overall,18,5,18,1
uni1,eng,impact,4,5,3,1
uni2,eng,overall,4,5,3,1
uni2,fr,impact,4,5,3,30
uni2,fr,overall,4,5,3,1
uni2,ger,impact,4,5,3,1
uni2,ger,overall,4,21,3,1
uni2,spain,impact,4,5,3,1
uni2,spain,overall,4,5,3,1
uni2,spain,impact,4,20,3,1
uni2,lat,overall,4,19,3,1
uni2,lat,impact,4,5,17,1`;

var data = d3.csvParse(csv, function(d) {
  d.one = +d.one;
  d.two = +d.two;
  d.three = +d.three;
  d.four = +d.four;
  return d;
});

var filteredData = data.filter(function(d) {
  return d.profile === "overall"
});

var finalArray = [];

[...new Set(filteredData.map(function(d) {
  return d.name
}))].forEach(function(d) {
  var tempObj = {
    [d]: []
  };
  filteredData.filter(function(e) {
    return e.name === d;
  }).forEach(function(e) {
    tempObj[d].push({
      [e.na]: e.one + e.two + e.three + e.four
    })
  });
  finalArray.push(tempObj)
});

console.log(finalArray)

<script src="https://d3js.org/d3.v4.min.js"></script>