带有选择的交互式 vega-lite / vega 图表答案

【问题标题】：Interactive vega-lite / vega chart with selection带有选择的交互式 vega-lite / vega 图表
【发布时间】：2018-12-19 23:51:07
【问题描述】：

我正在尝试构建一个交互式 vega-lite 仪表板，其中我有这张世界地图 vega editor link

根据选择的国家/地区，我尝试在下方显示另一个图表（vconcat 或外部）

是否可以在不使用 vconcat 的情况下在此图表之外执行此操作，或者我只能通过 vconcat 执行此操作？

有人试过类似的吗？

【问题讨论】：

是的，使用 concat 最适合这个用例。为什么不想使用它？
为了避免破坏我在仪表板上的网格布局，因为世界地图会占用更多空间。

标签： data-visualization visualization vega vega-lite

【解决方案1】：

最简单的方法是使用vconcat 创建。

也就是说，有一种方法可以读取选择的底层 Vega 信号。然后您可以使用 Vega View API 触发回调，根据所选数据显示另一个图表。

【讨论】：

供参考，这里是GitHub讨论读/写选择状态的链接github.com/vega/vega-lite/issues/183

【解决方案2】：

您现在可以使用可观察的笔记本来实现您想要的。

您在一个单元格中创建第一个图表，将其链接到第二个单元格，然后将这些单元格导出到您的网站中。

这是从observable开始的方法

这是代码的核心部分

letter_selected = Generators.observe(
  // selection_caught will (yield) a value promise with the selected letters
  function initialize_f(change_) {
    // creating an event listener (ie a function to attach to some DOM element)
    const signaled = (name, value) => change_(value);

    // attaching the event listener and naming it "test_selection"
    barChart.addSignalListener("test_selection", signaled);

    // check the doc ... https://github.com/observablehq/stdlib
    change_(barChart.signal("test_selection"));

    function dispose_f() {
      return barChart.removeSignalListener("test_selection", signaled);
    }

    return dispose_f;
  }
)

【讨论】：