Как добавить событие простого клика с помощью Vega-lite ObservableHQ?

Когда кто-то щелкает по точкам данных, я хочу вызвать пользовательскую функцию, чтобы показать какое-то изображение или информацию. Я использую Vega-lite в ноутбуках ObservableHQ и не могу найти ответа?

  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.

vega-lite observablehq
person Pushpanjali    schedule 22.07.2020    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Если вас интересует только клик, вы можете сделать что-то вроде первой ячейки в этой записной книжке: 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 выбор. Я тоже добавил это в блокнот.

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);
})
person visnu    schedule 28.07.2020