d3.nest返回每行的值的总和

时间:2017-11-16 23:48:46

标签: javascript d3.js

我有这样的csv:

PERMISSION_WRITE
PROPERTY_WRITE

我想计算一个d3嵌套,它将为每个uni返回我,并且在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 时计算一个二三四值的总和。

我希望有一个像这样的对象数组:

profile === overall

我成功地获得了整体价值的所有线条,但我不知道如何归还这些东西......

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

1 个答案:

答案 0 :(得分: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描述的结果的vanilla 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>