Question

我有一个如下所示的数据数组：

    var data = [
  {
    "key": "user",
    "values": [
      "roles",
      "manager",
      "otherRoles",
      "reports",
      "devices",
      "coffees"
    ]
  },
  {
    "key": "role",
    "values": [
      "assignments",
      "members",
      "otherMembers"
    ]
  },
  {
    "key": "assignment",
    "values": [
      "roles"
    ]
  },
  {
    "key": "Device",
    "values": [
      "owners",
      "roles"
    ]
  },
  {
    "key": "Coffee",
    "values": [
      "drinkers"
    ]
  }
];

我试图从SVG矩形呈现表，其中表头是“键”，表行是“值”。我能够完成这项工作的唯一方法是为每个表（table0，table1等）提供一个唯一的增量类。我知道这很糟糕，并且阻止我将来轻松访问所有表。以下是相关代码：

                parentBox = svgContainer.selectAll('.table')
                    .data(data, function(d) {return d.key;})
                    .enter()
                    .append('g')
                    .attr('class', function(d, i) {
                        return "table" + i;
                    })
                    .attr("transform", function(d, i) {
                        return "translate(" + boxWidth*i + "," + rowHeight*i + ")"; 
                    });

我想找出在D3中访问嵌套数据的正确方法。以下是完整的代码：D3 Example

Answer 1

原来解决方案只需要更好地理解选择。我首先创建了parentBox容器：

parentBox = svgContainer.selectAll('.table')
   .data(data, function(d) {return d.key;})
   .enter()
   .append('g')
   .attr('class', 'table') (etc.)

然后，当用行填充表时，我首先选择了创建的表，使用每个方法遍历每个表并创建每一行。一个技巧是使用d3.select(this)来确保正确创建行。

             svgContainer.selectAll('.table')
                .each(function (d, i) {
                    tableRows = d3.select(this).selectAll('.row')
                        .data(d.values)
                        .enter()
                        .append(g) (etc.)

D3.js - 访问嵌套数组中的数据

1 个答案: