使用 D3 访问嵌套的 JSON 数据

Question

我正在尝试制作一个嵌套 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
  }
}
]

如果有人能指出我正确的方向，我将不胜感激！

Answer 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>