假設我有一些使用 d3-fetch 命令從 API 回傳到 D3 的 JSON 資料，并且資料是一對嵌套物件，如下所示：
{
"researcher": {
"deployment": 3.55974264705882,
"collaboration": 2.33547794117647,
"supportlevel": 3.19944852941176
},
"data": {
"deployment": 3.34428879310345,
"collaboration": 2.08836206896552,
"supportlevel": 2.953125
}
}
對于父組，我這樣做是為了將它們放入用于在 X 軸上繪圖的變數中：
var groups = d3.map(data, function(d) {return(d)}).keys()
我的問題是如何將子值（部署、協作、支持級別）放入一個名為子組的變數中，以便我可以在多條形圖上繪圖？
顯示條形的最終格式（每個類別 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); });
})
uj5u.com熱心網友回復：
我仍然不確定是什么格式。以下 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;
}轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/497239.html
標籤：javascript json d3.js