D3.js 中的数据操作

Question

我有以下数据：

var data = [

  {Name:"A", Var:"15", Temp:"20",Lo:"T"},

  {Name:"B", Var:"45", Temp:"40",Lo:"F"},

  {Name:"B", Var:"63", Temp:"340",Lo:"T"},

  {Name:"A", Var:"415", Temp:"450",Lo:"F"},

  {Name:"B", Var:"405", Temp:"940",Lo:"F"},

  {Name:"B", Var:"415", Temp:"410",Lo:"T"},

  {Name:"A", Var:"24", Temp:"51",Lo:"T"},

  {Name:"C", Var:"43", Temp:"40",Lo:"T"},

  {Name:"A", Var:"41", Temp:"40",Lo:"F"}

]

我过滤数据以获得

dataFiltered = [

  {Name:"A", Var:"15", Temp:"20",Lo:"T"},

  {Name:"A", Var:"415", Temp:"450",Lo:"F"},

  {Name:"A", Var:"24", Temp:"51",Lo:"T"},

  {Name:"A", Var:"41", Temp:"40",Lo:"F"}

]

但我想要一个新的对象数组，例如：

dataNew = [

  {Vt:"35", Tv:"5"},

  {Vt:"865", Tv:"35"},

  {Vt:"75", Tv:"27"},

  {Vt:"80", Tv:"-1"}

]

最后，我想用dataNew呈现汇总数据Vt (35+865+75+80)和Tv (5+35+27-1)饼图上。

注意Vt = Var + Temp和Tv = Temp - Var从dataFiltered.

我真的不知道过滤数据后该怎么做，特别是如何获取dataNew.

我也在这里留下了过滤部分的代码。

var filteredData = data.filter(function(d) {

    return d.Name == "A";

});

Answer 1

你可以得到所有你在一个迭代上使用原始数据所需要的输出Array.reduce（）来生成一个object与数据的新数组和累积值Vt和Tv，例如：var data = [  {Name:"A", Var:"15", Temp:"20", Lo:"T"},  {Name:"B", Var:"45", Temp:"40", Lo:"F"},  {Name:"B", Var:"63", Temp:"340", Lo:"T"},  {Name:"A", Var:"415", Temp:"450", Lo:"F"},  {Name:"B", Var:"405", Temp:"940", Lo:"F"},  {Name:"B", Var:"415", Temp:"410", Lo:"T"},  {Name:"A", Var:"24", Temp:"51", Lo:"T"},  {Name:"C", Var:"43", Temp:"40", Lo:"T"},  {Name:"A", Var:"41", Temp:"40", Lo:"F"}];function reduceData(data, type){    return data.reduce((acc, {Name, Var, Temp}) =>    {        if (Name !== type)            return acc;        let Vt = (+Var) + (+Temp), Tv = Temp - Var;        let len = acc.newData.push({Vt, Tv});        acc.acc_vt += Vt;        acc.acc_tv += Tv;        acc.avg_tv = (acc.avg_tv * (len-1) + Tv) / len;        acc.avg_vt = (acc.avg_vt * (len-1) + Vt) / len;        return acc;    }, {newData: [], acc_vt: 0, acc_tv: 0, avg_vt: 0, avg_tv: 0})}console.log(reduceData(data, "A"));.as-console {background-color:black !important; color:lime;}.as-console-wrapper {max-height:100% !important; top:0;}