javascript - 使用字典作为D3数据源

Question

我想使用此数据(如下)作为 d3.js 程序的数据源:

{
  "component": {
    "name1": {
      "graphname": {
        "title": "foo",
        "data": [
          {"data": "DATE IN ISOFORMAT", "value": 5},
          {"data": "DATE IN ISOFORMAT", "value": 10}
          ]
      }
    },
    "name2": {
      "graphname": {
        "title": "foo",
        "data": [
          {"data": "DATE IN ISOFORMAT", "value": 5},
          {"data": "DATE IN ISOFORMAT", "value": 10}
          ]
      }
    }
  }
  "component2": {...
}

D3 只接受数组数据？我如何操纵它来工作？

我想为所有组件绘制由“名称”聚合的任何“graphname”的图表

有什么建议吗？

Answer 1

D3 不仅仅接受数组作为数据源，但出于循环目的，数组比 JavaScript 对象(“dict”)方便得多。不过，有一种非常简单的方法可以将对象转换为数组。如果上面的对象被称为d，那么可以使用以下命令创建其相应的数组:

var dlist = d3.entries(d);

现在 dlist 将类似于:

[ { key: 'component',
    value: { name1: ..., name2: ... } },
  { key: 'component2',
    value: { name1: ..., name2: ... } } ]

原始字典已被重新映射为“记录”数组，每个“记录”都有键和值对。这种“记录数组”模式在 D3 工作和 JavaScript 中非常常见。如果您需要循环子结构(例如 name1、name2、... 值，d3.entries 可以应用于原始结构的多个级别，因为需要进行这些字典到列表的转换。

由于这个答案在评论中被指出是错误的，here's a working example使用对象(“dict”)作为 D3 程序的数据源:首先在一个简单的循环中，然后使用惯用的 d3 .data(...).enter() 管道。