帶有選擇的交互式 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;
  }
)