Digamos que tengo algunos datos JSON devueltos desde una API a D3 usando el comando d3-fetch y los datos son un par de objetos anidados como este:
{ "researcher": { "deployment": 3.55974264705882, "collaboration": 2.33547794117647, "supportlevel": 3.19944852941176 }, "data": { "deployment": 3.34428879310345, "collaboration": 2.08836206896552, "supportlevel": 2.953125 } }Para los grupos principales, hago esto para colocarlos en una variable para graficar en el eje X:
var groups = d3.map(data, function(d) {return(d)}).keys()Mi pregunta es ¿cómo obtengo los valores secundarios (implementación, colaboración, nivel de soporte) en una variable llamada subgrupos para poder trazar en un gráfico de barras múltiples?
El formato final para mostrar las barras (3 por categoría) será así:
// 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); }); })Todavía no estoy seguro de qué formato. ¿Es uno de los siguientes 2 el formato correcto?
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; }