使用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>