D3嵌套和对象遍历

时间：2016-09-20 03:28:43

标签： javascript d3.js nested

我在下面分享了一个json，我试图在可视化之前嵌套数据。我想在gov和non-gov下绘制每个供应商如何分配高低项目，以便创建像[{v1: {Gov: {high:3, low:2}, {Non-Gov: {high:12, low:1}}}, {v2:{Gov: {high:3, low:2}, {Non-Gov: {high:12, low:1}}}, ...]

这样的json对象

我能够嵌套数据但无法获得相应的计数。任何指导表示赞赏。如果问题构造含糊不清，请道歉。

    [
  {
    "vendor": "V1",
    "ptype": "Gov",
    "critical": "high"
  },
  {
    "vendor": "V2",
    "ptype": "Gov",
    "critical": "low"
  },
  {
    "vendor": "V3",
    "ptype": "Gov",
    "critical": "high"
  },
  {
    "vendor": "V4",
    "ptype": "Non-Gov",
    "critical": "low"
  },
  {
    "vendor": "V5",
    "ptype": "Non-Gov",
    "critical": "high"
  },
  {
    "vendor": "V6",
    "ptype": "Gov",
    "critical": "high"
  },
  {
    "vendor": "V7",
    "ptype": "Gov",
    "critical": "high"
  },
  {
    "vendor": "V8",
    "ptype": "Non-Gov",
    "critical": "low"
  },
  {
    "vendor": "V9",
    "ptype": "Non-Gov",
    "critical": "high"
  },
  {
    "vendor": "V10",
    "ptype": "Gov",
    "critical": "high"
  },
  {
    "vendor": "V1",
    "ptype": "Non-Gov",
    "critical": "low"
  },
  {
    "vendor": "V2",
    "ptype": "Non-Gov",
    "critical": "high"
  },
  {
    "vendor": "V3",
    "ptype": "Non-Gov",
    "critical": "low"
  },
  {
    "vendor": "V4",
    "ptype": "Non-Gov",
    "critical": "high"
  },
  {
    "vendor": "V5",
    "ptype": "Non-Gov",
    "critical": "high"
  },
  {
    "vendor": "V6",
    "ptype": "Non-Gov",
    "critical": "low"
  },
  {
    "vendor": "V7",
    "ptype": "Gov",
    "critical": "low"
  },
  {
    "vendor": "V8",
    "ptype": "Gov",
    "critical": "high"
  },
  {
    "vendor": "V9",
    "ptype": "Non-Gov",
    "critical": "high"
  },
  {
    "vendor": "V10",
    "ptype": "Non-Gov",
    "critical": "low"
  },
  {
    "vendor": "V1",
    "ptype": "Gov",
    "critical": "high"
  },
  {
    "vendor": "V2",
    "ptype": "Gov",
    "critical": "low"
  },
  {
    "vendor": "V3",
    "ptype": "Non-Gov",
    "critical": "high"
  },
  {
    "vendor": "V4",
    "ptype": "Non-Gov",
    "critical": "high"
  },
  {
    "vendor": "V5",
    "ptype": "Non-Gov",
    "critical": "high"
  },
  {
    "vendor": "V6",
    "ptype": "Gov",
    "critical": "high"
  },
  {
    "vendor": "V7",
    "ptype": "Gov",
    "critical": "high"
  },
  {
    "vendor": "V8",
    "ptype": "Non-Gov",
    "critical": "low"
  },
  {
    "vendor": "V9",
    "ptype": "Gov",
    "critical": "high"
  },
  {
    "vendor": "V10",
    "ptype": "Gov",
    "critical": "low"
  }
]

  1. 没有汇总

     n = d3.nest().key(function(d){return d.vendor;})
    .key(function(d){return d.ptype;})
    .key(function(d){return d.critical;})
    .entries(j);

  2. 汇总

    n = d3.nest().key(function(d){return d.vendor;})
        .key(function(d){return d.ptype;})
        .key(function(d){return d.critical;})
        .rollup(function(leaf){
        return[
        {key:'GH', value:leaf[0].values.length}
        ,{key:'GL',value:leaf[1].values.length}
        ]})
        .entries(j);

2 个答案:

答案 0 :(得分：1)

我不知道D3，但是使用vanilla JS你可以按如下方式转换数据：

＆＃13;
＆＃13; 
var input = [ { "vendor": "V1", "ptype": "Gov", "critical": "high" }, { "vendor": "V2", "ptype": "Gov", "critical": "low" }, { "vendor": "V3", "ptype": "Gov", "critical": "high" }, { "vendor": "V4", "ptype": "Non-Gov", "critical": "low" }, { "vendor": "V5", "ptype": "Non-Gov", "critical": "high" }, { "vendor": "V6", "ptype": "Gov", "critical": "high" }, { "vendor": "V7", "ptype": "Gov", "critical": "high" }, { "vendor": "V8", "ptype": "Non-Gov", "critical": "low" }, { "vendor": "V9", "ptype": "Non-Gov", "critical": "high" }, { "vendor": "V10", "ptype": "Gov", "critical": "high" }, { "vendor": "V1", "ptype": "Non-Gov", "critical": "low" }, { "vendor": "V2", "ptype": "Non-Gov", "critical": "high" }, { "vendor": "V3", "ptype": "Non-Gov", "critical": "low" }, { "vendor": "V4", "ptype": "Non-Gov", "critical": "high" }, { "vendor": "V5", "ptype": "Non-Gov", "critical": "high" }, { "vendor": "V6", "ptype": "Non-Gov", "critical": "low" }, { "vendor": "V7", "ptype": "Gov", "critical": "low" }, { "vendor": "V8", "ptype": "Gov", "critical": "high" }, { "vendor": "V9", "ptype": "Non-Gov", "critical": "high" }, { "vendor": "V10", "ptype": "Non-Gov", "critical": "low" }, { "vendor": "V1", "ptype": "Gov", "critical": "high" }, { "vendor": "V2", "ptype": "Gov", "critical": "low" }, { "vendor": "V3", "ptype": "Non-Gov", "critical": "high" }, { "vendor": "V4", "ptype": "Non-Gov", "critical": "high" }, { "vendor": "V5", "ptype": "Non-Gov", "critical": "high" }, { "vendor": "V6", "ptype": "Gov", "critical": "high" }, { "vendor": "V7", "ptype": "Gov", "critical": "high" }, { "vendor": "V8", "ptype": "Non-Gov", "critical": "low" }, { "vendor": "V9", "ptype": "Gov", "critical": "high" }, { "vendor": "V10", "ptype": "Gov", "critical": "low" } ];

var working = input.reduce(function(p, c) {
    var v = p[c.vendor];
    if (!v) v = p[c.vendor] = {Gov: {high: 0, low: 0}, "Non-Gov": {high: 0, low: 0}};
    v[c.ptype][c.critical]++;
    return p;
  }, {});

var output = Object.keys(working).map(function(v) {
    var o = {};
    o[v] = working[v];
    return o;
  });

console.log(output);
＆＃13;
＆＃13;
＆＃13;

或者，如果您可以使用ES6语法，则可以使.map()部分更短：

＆＃13;
＆＃13; 
var input = [ { "vendor": "V1", "ptype": "Gov", "critical": "high" }, { "vendor": "V2", "ptype": "Gov", "critical": "low" }, { "vendor": "V3", "ptype": "Gov", "critical": "high" }, { "vendor": "V4", "ptype": "Non-Gov", "critical": "low" }, { "vendor": "V5", "ptype": "Non-Gov", "critical": "high" }, { "vendor": "V6", "ptype": "Gov", "critical": "high" }, { "vendor": "V7", "ptype": "Gov", "critical": "high" }, { "vendor": "V8", "ptype": "Non-Gov", "critical": "low" }, { "vendor": "V9", "ptype": "Non-Gov", "critical": "high" }, { "vendor": "V10", "ptype": "Gov", "critical": "high" }, { "vendor": "V1", "ptype": "Non-Gov", "critical": "low" }, { "vendor": "V2", "ptype": "Non-Gov", "critical": "high" }, { "vendor": "V3", "ptype": "Non-Gov", "critical": "low" }, { "vendor": "V4", "ptype": "Non-Gov", "critical": "high" }, { "vendor": "V5", "ptype": "Non-Gov", "critical": "high" }, { "vendor": "V6", "ptype": "Non-Gov", "critical": "low" }, { "vendor": "V7", "ptype": "Gov", "critical": "low" }, { "vendor": "V8", "ptype": "Gov", "critical": "high" }, { "vendor": "V9", "ptype": "Non-Gov", "critical": "high" }, { "vendor": "V10", "ptype": "Non-Gov", "critical": "low" }, { "vendor": "V1", "ptype": "Gov", "critical": "high" }, { "vendor": "V2", "ptype": "Gov", "critical": "low" }, { "vendor": "V3", "ptype": "Non-Gov", "critical": "high" }, { "vendor": "V4", "ptype": "Non-Gov", "critical": "high" }, { "vendor": "V5", "ptype": "Non-Gov", "critical": "high" }, { "vendor": "V6", "ptype": "Gov", "critical": "high" }, { "vendor": "V7", "ptype": "Gov", "critical": "high" }, { "vendor": "V8", "ptype": "Non-Gov", "critical": "low" }, { "vendor": "V9", "ptype": "Gov", "critical": "high" }, { "vendor": "V10", "ptype": "Gov", "critical": "low" } ];

var working = input.reduce((p, c) => {
    var v = p[c.vendor];
    if (!v) v = p[c.vendor] = {Gov: {high: 0, low: 0}, "Non-Gov": {high: 0, low: 0}};
    v[c.ptype][c.critical]++;
    return p;
  }, {});

var output = Object.keys(working).map(v => ({ [v]: working[v] }));

console.log(output);
＆＃13;
＆＃13;
＆＃13;

编辑：在我看来，您可能不想对可能的ptype和critical值进行硬编码，因此...以下（丑陋的，未经优化的）版本抓取价值观：

＆＃13;
＆＃13; 
var input = [ { "vendor": "V1", "ptype": "Gov", "critical": "high" }, { "vendor": "V2", "ptype": "Gov", "critical": "low" }, { "vendor": "V3", "ptype": "Gov", "critical": "high" }, { "vendor": "V4", "ptype": "Non-Gov", "critical": "low" }, { "vendor": "V5", "ptype": "Non-Gov", "critical": "high" }, { "vendor": "V6", "ptype": "Gov", "critical": "high" }, { "vendor": "V7", "ptype": "Gov", "critical": "high" }, { "vendor": "V8", "ptype": "Non-Gov", "critical": "low" }, { "vendor": "V9", "ptype": "Non-Gov", "critical": "high" }, { "vendor": "V10", "ptype": "Gov", "critical": "high" }, { "vendor": "V1", "ptype": "Non-Gov", "critical": "low" }, { "vendor": "V2", "ptype": "Non-Gov", "critical": "high" }, { "vendor": "V3", "ptype": "Non-Gov", "critical": "low" }, { "vendor": "V4", "ptype": "Non-Gov", "critical": "high" }, { "vendor": "V5", "ptype": "Non-Gov", "critical": "high" }, { "vendor": "V6", "ptype": "Non-Gov", "critical": "low" }, { "vendor": "V7", "ptype": "Gov", "critical": "low" }, { "vendor": "V8", "ptype": "Gov", "critical": "high" }, { "vendor": "V9", "ptype": "Non-Gov", "critical": "high" }, { "vendor": "V10", "ptype": "Non-Gov", "critical": "low" }, { "vendor": "V1", "ptype": "Gov", "critical": "high" }, { "vendor": "V2", "ptype": "Gov", "critical": "low" }, { "vendor": "V3", "ptype": "Non-Gov", "critical": "high" }, { "vendor": "V4", "ptype": "Non-Gov", "critical": "high" }, { "vendor": "V5", "ptype": "Non-Gov", "critical": "high" }, { "vendor": "V6", "ptype": "Gov", "critical": "high" }, { "vendor": "V7", "ptype": "Gov", "critical": "high" }, { "vendor": "V8", "ptype": "Non-Gov", "critical": "low" }, { "vendor": "V9", "ptype": "Gov", "critical": "high" }, { "vendor": "V10", "ptype": "Gov", "critical": "low" } ];

var working = input.reduce((p, c) => {
    var v = p.vendors[c.vendor];
    if (!v) v = p.vendors[c.vendor] = {};
    if (!v[c.ptype]) v[c.ptype] = {};
    if (!v[c.ptype][c.critical]) v[c.ptype][c.critical] = 1;
    else v[c.ptype][c.critical]++;

    p.ptypes[c.ptype] = true;
    p.criticals[c.critical] = true;

    return p;
  }, {vendors:{}, ptypes:{}, criticals:{}});

var output = Object.keys(working.vendors).map(v => {
    var c = working.vendors[v];
    Object.keys(working.ptypes).forEach(p => {
      if (!c[p]) c[p] = {};
      Object.keys(working.criticals).forEach(q => c[p][q] || (c[p][q] = 0));
    });
    return { [v]: c };
  });

console.log(output);
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：1)

我可以这样做.. 

var nested_data = d3.nest()
.key(function(d) { return d.vendor; }).sortKeys(d3.ascending)
.key(function(d) { return d.ptype; }).sortKeys(function(d) { return d;})
.key(function(d) { return d.critical; }).sortKeys(function(d) { return d;})
.rollup(function(leaves) { return leaves.length; })
.entries(j);

谢谢！

相关问题
最新问题