How to map over nested D3 objects and create array-CodePudding

Let say I have some JSON data returned from an API to D3 using the d3-fetch command and the data is a a couple of nested objects like this:

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

For the parent groups, I do this to get them into a variable for graphing on X-axis:

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

My question is how do I get the child values (deployment, collaboration, suppportlevel) into a variable called subgroups so I can plot on a multibar chart?

The final format to show the bars (3 per category) will be like this:

// 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); });
      
        })

CodePudding user response：

I'm still not sure what format. Is one of the following 2 is the right format?

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;
}