交互式vega-lite / vega选择图表

Question

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

基于对国家/地区的选择，我尝试在下面显示另一个图表(vconcat或外部)

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

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

Answer 1

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

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

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