如何在嵌套的D3对象上映射并创建数组

Question

假设我使用D3-fetch命令将一些JSON数据从API返回到D3，并且数据是类似的嵌套对象：

{
    "researcher": { 
        "deployment": 3.55974264705882,
        "collaboration": 2.33547794117647,
        "supportlevel": 3.19944852941176
    },
    "data": {
        "deployment": 3.34428879310345,
        "collaboration": 2.08836206896552,
        "supportlevel": 2.953125
    }
}

对于父组，我这样做是为了使它们成为用于在X-上绘制的变量Axis：

var groups = d3.map(data, function(d) {return(d)}).keys()

我的问题是，如何将儿童价值观（部署，协作，spupportlevel）纳入一个称为子组的变量，以便我可以在多与人图表上绘制？

显示条形的最终格式（每类3）将是这样：

// Show the bars
        svg.append("g")
          .selectAll("g")
          // Enter in data = loop group per group
          .data(data)
          .enter()
          .append("g")
            .attr("transform", function(d) { return "translate(" + x(d.group) + ",0)"; })
          .selectAll("rect")
          .data(function(d) { return subgroups.map(function(key) { return {key: key, value: d[key]}; }); })
          .enter().append("rect")
            .attr("x", function(d) { return xSubgroup(d.key); })
            .attr("y", function(d) { return y(d.value); })
            .attr("width", xSubgroup.bandwidth())
            .attr("height", function(d) { return height - y(d.value); })
            .attr("fill", function(d) { return color(d.key); });
      
        })

Answer 1

我仍然不确定哪种格式。以下2是正确的格式吗？

var api_results = [{
  "researcher": {
    "deployment": 3.55974264705882,
    "collaboration": 2.33547794117647,
    "supportlevel": 3.19944852941176
  },
  "data": {
    "deployment": 3.34428879310345,
    "collaboration": 2.08836206896552,
    "supportlevel": 2.953125
  }
}, {
  "researcher": {
    "deployment": 3.0,
    "collaboration": 4.0,
    "supportlevel": 5.0
  },
  "data": {
    "deployment": 6.0,
    "collaboration": 7.0,
    "supportlevel": 8.0
  }
}];

// into

var subgroups2 = {
  "deployment": {
    researcher: [3.55974264705882, 3.0],
    data: [3.34428879310345, 6.0]
  },
  "collaboration": {
    researcher: [2.33547794117647, 4.0],
    data: [2.08836206896552, 7.0]
  },
  "supportLevel": {
    researcher: [3.19944852941176, 5.0],
    data: [2.953125, 8.0]
  }
}

// let's go
var result = {};

for (var i = 0; i < api_results.length; i++) {
  var api_result = api_results[i];

  for (var key_outer in api_result) {
    var values = api_result[key_outer];

    for (var key_inner in values) {
      var value = values[key_inner];

      if (!result[key_inner]) {
        result[key_inner] = {}
      }

      if (!result[key_inner][key_outer]) {
        result[key_inner][key_outer] = []
      }

      result[key_inner][key_outer].push(value)

    }
  }
}

console.log(result)

.as-console-wrapper {
  max-height: 100% !important;
}