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只接受数组数据？我该如何操纵它？

我想为所有组件绘制由“name”汇总的任何“graphname”的图表

任何提示？

Answer 1

D3 不只接受数组作为数据源，但出于循环目的，数组比JavaScript对象（“dicts”）更方便。但是，有一种非常简单的方法可以将对象转换为数组。如果上面的对象被称为d，则可以使用以下命令创建其对应的数组：

var dlist = d3.entries(d);

现在dlist将是：

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

原始字典已重新映射为一系列“记录”，每个记录都有key和value对。这种“记录数组”模式在D3工作中非常普遍，而且一般都是JavaScript。如果您需要遍历子结构（例如name1，name2，...值，d3.entries可以应用于原始结构的多个级别，如同那些 - 列表转换是必需的。

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

使用字典作为D3数据源

1 个答案: