[英]Using D3 to access nested JSON data
我正在尝试创建一个嵌套JSON数据集的表。 我能够检索一些值(“时间”,“湿度”,“临时”),但到目前为止,访问嵌套对象(“FSR_1”...“FSR_3”)都没有成功。
以下代码未返回任何错误,但row[Object.keys(row)[i].resistance]
不返回数据集中的值:
d3.json("test.json", function(error, data){
var columns = Object.keys(data[0]);
var table = d3.select("body").append("table"),
thead = table.append("thead")
.attr("class", "thead");
tbody = table.append("tbody");
thead.append("tr").selectAll("th")
.data(columns)
.enter()
.append("th")
.text(function(d) { return d; })
.on("click", function(header, i) {
tbody.selectAll("tr").sort(function(a, b) {
return d3.descending(a[header], b[header]);
});
});
var rows = tbody.selectAll("tr.row")
.data(data)
.enter()
.append("tr").attr("class", "row");
var cells = rows.selectAll("td")
.data(function(row) {
return d3.range(Object.keys(row).length).map(function(column, i) {
return i < 3 ? row[Object.keys(row)[i]] : row[Object.keys(row)[i].resistance];
});
})
.enter()
.append("td")
.text(function(d) { return d; })
});
数据结构如下所示:
[
{
"time": 1388477,
"humidity": 30.7,
"temp": 34.3,
"FSR_1": {
"resistance": 6744,
"force": 1
},
"FSR_2": {
"resistance": 11682,
"force": 1
},
"FSR_3": {
"resistance": 12143,
"force": 1
}
},
{
"time": 1448863,
"humidity": 31.3,
"temp": 34.1,
"FSR_1": {
"resistance": 6829,
"force": 1
},
"FSR_2": {
"resistance": 11231,
"force": 1
},
"FSR_3": {
"resistance": 11186,
"force": 1
}
}
]
如果有人能指出我正确的方向,我真的很感激!
resistance
不是括号表示法的一部分,以获取外部对象的属性名称。 因此,移动到括号标记后 :
return i < 3 ? row[Object.keys(row)[i]] : row[Object.keys(row)[i]].resistance;
//outside the bracket notation ----------------------------------^
与您的问题无关,但Object.keys()
已经返回一个数组。 由于您在map
方法中使用索引,因此可以删除d3.range
。 所以,而不是:
d3.range(Object.keys(row).length).map(etc...
它可以只是:
Object.keys(row).map(etc...
这是结果代码:
var data = [{ "time": 1388477, "humidity": 30.7, "temp": 34.3, "FSR_1": { "resistance": 6744, "force": 1 }, "FSR_2": { "resistance": 11682, "force": 1 }, "FSR_3": { "resistance": 12143, "force": 1 } }, { "time": 1448863, "humidity": 31.3, "temp": 34.1, "FSR_1": { "resistance": 6829, "force": 1 }, "FSR_2": { "resistance": 11231, "force": 1 }, "FSR_3": { "resistance": 11186, "force": 1 } } ]; var columns = Object.keys(data[0]); var table = d3.select("body").append("table"), thead = table.append("thead") .attr("class", "thead"); tbody = table.append("tbody"); thead.append("tr").selectAll("th") .data(columns) .enter() .append("th") .text(function(d) { return d; }) .on("click", function(header, i) { tbody.selectAll("tr").sort(function(a, b) { return d3.descending(a[header], b[header]); }); }); var rows = tbody.selectAll("tr.row") .data(data) .enter() .append("tr").attr("class", "row"); var cells = rows.selectAll("td") .data(function(row) { return Object.keys(row).map(function(column, i) { return i < 3 ? row[Object.keys(row)[i]] : row[Object.keys(row)[i]].resistance; }); }) .enter() .append("td") .text(function(d) { return d; })
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.