如何从嵌套数组访问数据对象

Question

我正在使用 ObservableHQ 和 vega lite API 进行数据可视化，但遇到了一个我无法解决的问题。问题是，我想从以下数据结构访问数据对象，

数组

数组
数组
- 项目
- 项目
数组

正如您在我糟糕的绘图中看到的那样，我有一个多维数组，并且想从主数组访问一个特定的数组。我怎样才能使用 Vegalite API?

vl.markCircle({
  thickness: 4,
  bandSize: 2
})
.data(diff[0])
.encode(
vl.x().fieldQ("mins").scale({ domain: [-60, 60] }),
vl.color().fieldN('type').scale({ range: ['#636363', '#f03b20'] }),
)
.config({bandSize: 10})
.width(600)
.height(40)
.render()

谢谢，

Answer 1

根据您的意见，我假设您正在尝试自动绘制所有嵌套数组（分别），而不仅仅是其中一个。根据您的图表代码，我假设您的数据看起来像这样：

const diff = [
  [
    { mins: 38, type: "Type B" },
    { mins: 30, type: "Type B" },
    { mins: 28, type: "Type A" },
    …
  ],
  [
    { mins: 20, type: "Type B" },
    { mins: 17, type: "Type A" },
    { mins: 19, type: "Type A" },
    …
  ],
  …
];

首先，将所有的数组压平成一个大数组，在item对象上用array属性记录每个数组来自哪个数组，用flatMap。如果每个子数组代表不同的城市、不同的年份或不同的人收集数据，您可以将 array: i 替换为对数据更有意义的内容。

const flat = diff.flatMap((arr, i) => arr.map((d) => ({ ...d, array: i })));

然后使用 Vega-Lite 的“分面”(documentation, Observable tutorial and examples) 将图表分成多个部分，每个部分对应 array: i 的值，具有共享比例。这只是在您的示例中添加了一行：

vl
  .markCircle({
    thickness: 4,
    bandSize: 2
  })
  .data(flat)
  .encode(
    vl.row().fieldN("array"), // this line is new
    vl
      .x()
      .fieldQ("mins")
      .scale({ domain: [-60, 60] }),
    vl
      .color()
      .fieldN("type")
      .scale({ range: ["#636363", "#f03b20"] })
  )
  .config({ bandSize: 10 })
  .width(600)
  .height(40)
  .render()

Here’s an Observable notebook with examples of this working. 正如我在底部显示的那样，您还可以映射数组，为每个嵌套数组制作一个完全独立的图表。

如何从嵌套数组访问数据对象

How to access data object from a nested array

vega-lite

observablehq