基于Ag Data Grid过滤数据自动更新Vega-Lite图表的ObservableHQ实现需求

核心逻辑 #

通过监听Ag Grid的过滤器变更事件，实时抓取过滤后的行数据，驱动Vega-Lite图表自动更新。

具体实现步骤 #

1. 监听过滤器变更事件
   初始化Ag Grid时，在gridOptions中配置onFilterChanged回调，过滤器变动时自动触发数据更新：

   const gridOptions = {
     // 原有表格配置项
     onFilterChanged: () => {
       updateChartSource();
     }
   };
   

2. 实时获取过滤后的数据
   编写updateChartSource函数，借助Ag Grid API提取过滤后的可见行数据：

   let gridApi;
   let chartData = [];
   
   function updateChartSource() {
     // 获取所有行节点，筛选出可见的（已过滤）行
     const filteredNodes = gridApi.getModel().getRowNodes().filter(node => node.isVisible());
     // 提取行数据
     chartData = filteredNodes.map(node => node.data);
   }
   

   注意：需在onGridReady回调中保存gridApi实例，同时初始化时加载一次数据：

   const gridOptions = {
     onGridReady: (params) => {
       gridApi = params.api;
       updateChartSource();
     },
     // 其他配置...
   };
   

3. 让Vega-Lite响应数据变化
   在ObservableHQ中，直接将响应式的chartData作为图表数据源，Observable会自动监听变量变化并重绘图表：

   const chart = vegaLite({
     data: chartData,
     // 你的Vega-Lite可视化配置（标记、编码、坐标轴等）
     mark: 'bar',
     encoding: {
       x: {field: 'yourXField', type: 'ordinal'},
       y: {field: 'yourYField', type: 'quantitative'}
     }
   });
   

4. 移除手动触发按钮
   删除原笔记本中用于手动更新的按钮逻辑，现在过滤器变更会自动触发图表更新。

内容的提问来源于stack exchange，提问作者Jakub.Novotny