D3.每行返回值的嵌套和

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嵌套，它将为每个uni返回我，并且在profile === overall时返回1、2、3、4值的总和。

我希望有一个对象数组，比如：

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

我成功地得到了所有行的整体值，但我不知道如何返回这样的东西…

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

您想要的结果并不是很清楚，因为您没有向我们展示您希望如何在同一个uni中定位不同eng的内部数组。

因此，这里有一个解决方案(在众多解决方案中)，检查控制台以查看阵列的结构：

​

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函数以我想要的方式操作数据数组……它具有更多的功能，您可以根据需要精确地构建结果。

编辑：回答，这是创建由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>

​