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

Question

我正在尝试构建一个交互式 vega-lite 仪表板，我在其中获得了这个世界地图vega 编辑器链接

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

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

有没有人尝试过类似的东西？

Answer 1

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

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

Answer 2

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

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

以下是如何开始观察

这是代码的中心部分

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;
  }
)