d3.js - 检索分箱 vega (lite) 直方图的基础值？

Question

您如何检索和显示用于计算 vega 直方图中分箱条形高度的值？

在这个 d3 observable notebook中，我说明了想要实现的目标......当一个条被单击时，我selected_text使用条的基础值更新变量，这些值被计算为条的高点。

相关问题涉及fold转换，但就我而言，我正在寻找flatten transform.

这是我正在寻找的数据转换的插图。来自：

[
    {"name": "alpha", "data": 123, "bin0": 1, "bin1": 2},
    {"name": "alpha", "data": 789, "bin0": 2, "bin1": 3},
    {"name": "beta",  "data": 456, "bin0": 2, "bin1": 3},
    {"name": "beta",  "data": 789, "bin0": 3, "bin1": 4},
    {"name": "beta",  "data": 0AB, "bin0": 3, "bin1": 4}
]

到

[
    "bin0": 1, "bin1": 2, values: [{"name": "alpha", "data": 123}]
    "bin0": 2, "bin1": 3, values: [{"name": "alpha", "data": 789},
                   {"name": "beta", "data": 456}]
    "bin0": 3, "bin1": 4, values: [{"name": "beta", "data": 789},
                   {"name": "beta", "data": 0AB}]
]

我认为如果concat表达式对 的 可用，则groupby operator可以实现这一点aggregation transforms，但事实并非如此。

标签： d3.jsvisualizationvegavega-litealtair

Answer 1

“未展平”变换可以使用聚合变换大致实现values：

{
  "data": {
    "values": [
      {"name": "alpha", "data": 123, "bin0": 1, "bin1": 2},
      {"name": "alpha", "data": 789, "bin0": 2, "bin1": 3},
      {"name": "beta", "data": 456, "bin0": 2, "bin1": 3},
      {"name": "beta", "data": 789, "bin0": 3, "bin1": 4},
      {"name": "beta", "data": 789, "bin0": 3, "bin1": 4}
    ]
  },
  "transform": [
    {
      "aggregate": [{"op": "values", "as": "values"}],
      "groupby": ["bin0", "bin1"]
    }
  ],
  "mark": "point"
}

在Vega Editor的数据查看器中，您可以看到转换后的数据为：

[
  {"bin0": 1, "bin1": 2,
   "values": [{"name": "alpha", "data": 123, "bin0": 1, "bin1": 2}]},
  {"bin0": 2, "bin1": 3,
   "values": [{"name": "alpha", "data": 789, "bin0": 2, "bin1": 3},
              {"name": "beta", "data": 456, "bin0": 2, "bin1": 3}]},
  {"bin0": 3, "bin1": 4,
   "values": [{"name": "beta", "data": 789, "bin0": 3, "bin1": 4},
              {"name": "beta", "data": 0AB, "bin0": 3, "bin1": 4}]}
]