D3 - 处理 JSON 嵌套数据结构答案

【问题标题】：D3 - dealing with JSON nested data structuresD3 - 处理 JSON 嵌套数据结构
【发布时间】：2013-11-23 09:38:27
【问题描述】：

我的帖子不知何故是对这个问题的跟进：D3 - how to deal with JSON data structures?

简而言之，我在处理复杂的嵌套 JSON 结构时遇到了麻烦。让我举一个简单的例子（反映上面的链接）来说明：

var regularData = [[40,20,30,24,18,40],
                    [24,20,30,41,12,34]];

var myTable = d3.select("body").append("table")
  .selectAll("tr")
  .data(regularData, function(d) {
    return d;
  })
  .enter()
  .append("tr")
  .selectAll("td")
  .data(function(d) {
    return d;
  })
  .enter()
  .append("td") 
  .text(function(d) {
    return d;
  });

正如 D3 的文档所示，这会产生两行数字，正如预期的那样。

但是如果我用这个替换regularData：

var newData = [{"user":"jim","scores":[40,20,30,24,18,40]},
            {"user":"ray","scores":[24,20,30,41,12,34]}];

并将 myTable 的构造线 3 到 5 调整为：

  .data(newData, function(d) {
    return d.scores;
  })

我本来希望循环输入每个用户的分数。相反，第二个数据子句仍然绑定到顶级对象（即具有属性“user”和“scores”）。

蛮力方法是将我的数据转换为适合每个目的的普通“数组数组”。但也许我错过了一些东西，更优雅的方式是可能的？

提前感谢您的帮助，

【问题讨论】：

标签： d3.js

【解决方案1】：

您稍微误解了second argument to d3.data 的含义。

该参数用于object constancy，为数据提供一个id，而不是像d3 API 中的大多数其他函数那样作为访问器函数。

但是，当函数作为第一个参数传递时，如下所示：

.data(function(d) {
  return d;
})

那么它的行为就像一个访问函数。

在你的情况下，你想要的是这些方面的东西：

var newData = [{"user":"jim","scores":[40,20,30,24,18,40]},
            {"user":"ray","scores":[24,20,30,41,12,34]}];

var myTable = d3.select("body").append("table")
  .selectAll("tr")
  .data(regularData, function(d) {
    return d.user;
  })
  .enter()
  .append("tr")
  .selectAll("td")
  .data(function(d) {
    return d.scores;
  })
  .enter()
  .append("td") 
  .text(function(d) {
    return d;
  });

我已将user 字段用作数据的id，并在第二次调用data 时返回scores 以创建td 元素。

【讨论】：