如何用Vega-lite ObservableHQ添加简单的点击事件？

Question

当有人点击数据上的点时，我想调用自定义函数来显示一些图像或信息。我在ObservableHQ笔记本中使用Vega-lite，但找不到答案？

  const chart = (type)=>{ 
    return  vl
      .markCircle({size: 15, opacity: 0.9})
      .autosize('fit')
      .data(getData(type))
      .encode(
       vl.x().fieldQ('slice').title('Slice'),
       vl.y().fieldQ('dice').title(type).scale({domain: [0, 1.0]}),
       vl.color().field('algorithm').title('Algorithm'),
       vl.tooltip(['slice', 'algorithm', 'dice'])
      )    
  }
 
  const types = ['DSC','SDSC_2mm']
  const charts = []
  types.map(type => {
    charts.push(chart(type))
  })
  return vl.vconcat(vl.hconcat(charts)).render()
}

This is the code I have in notebook.

Answer 1

如果你只关心点击，你可以这样做，比如这个笔记本中的第一个单元格：https://observablehq.com/@visnup/vega-lite-data-out

具体地说：

clicked = Generators.observe((notify) => {
  const clicked = (event, {datum}) => notify(datum);
  clickable.addEventListener("click", clicked);
  return () => clickable.removeEventListener("click", clicked);
})

其中clickable是另一个单元格中我的图表的名称。

一个比可点击更好的例子是对Vega-Lite selections做同样的事情。我也把它加到笔记本里了。

selected = Generators.observe((notify) => {
  const signal = Object.keys(selectable.getState({ signals: (name) => name.match(/^sel\d+$/) }).signals)[0];
  const selected = (selection, predicates) => {
    const within = penguins.filter(d => {
      for (const [key, [min, max]] of Object.entries(predicates))
        if (isNaN(+d[key]) || d[key] < min || d[key] > max)
          return false;
      return true;
    })
    notify(within);
  }
  selectable.addSignalListener(signal, selected);
  return () => selectable.removeEventListener(signal, selected);
})