Есть ли способ изменить диаграммы Vega с D3.js ?

#javascript #d3.js #data-visualization #vega

#javascript #d3.js #визуализация данных #вега

Вопрос:

Недавно я начал изучать Vega, чтобы уменьшить объем D3.js кодирования для более или менее типичных диаграмм. Однако для сложных панелей мониторинга взаимодействие между Vega графиками с использованием сигналов все еще немного сложно для меня.

Есть ли способ загрузить «стандартную» Vega диаграмму на HTML страницу, а затем получить доступ к ее элементам с помощью D3? Когда я развертываю Vega примеры с помощью Vega-Embed, единственным элементом, подключенным к диаграмме, является холст:

<canvas width="542" height="297" class="marks" style="width: 434px; height: 238px;"></canvas>

Другими словами, есть ли решение для экспорта Vega с доступными элементами DOM?

1. Это очень актуальный вопрос! Мне также было интересно, как это можно сделать, но пока ничего не нашел. AFAIK, должна быть возможность отобразить диаграмму с помощью vega-embed в SVG?

Ответ №1:

Передача opt={renderer: 'svg'} в качестве аргумента embed функции позволяет получать доступ к различным элементам визуализации и изменять их через DOM. Ниже приведен простой пример, в котором я получаю доступ и изменяю цвет первой панели с помощью D3:

 <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vega@5"></script>
<script src="https://cdn.jsdelivr.net/npm/vega-lite@4"></script>
<script src="https://cdn.jsdelivr.net/npm/vega-embed@6"></script>


<div id="vis"></div>

<script>
  var spec = "https://vega.github.io/vega/examples/grouped-bar-chart.vg.json";

  vegaEmbed('#vis', spec, opt = {
    renderer: 'svg'
  }).then(() => {
    d3.select('g.mark-rect.role-mark')
      .select('path')
      .attr('fill', 'firebrick')
  })
</script>

Развернуть фрагмент

В дополнение к именам классов CSS по умолчанию, которые использует Vega, значения свойств name и role mark будут отображаться как имена классов CSS во включающем элементе SVG group (g), содержащем экземпляры mark (источник: https://vega.github.io/vega/docs/marks /).

Вы также можете проверить более сложный пример в этом наблюдаемом блокноте: https://observablehq.com/@oliviafvane/hacking-a-vega-lite-map-label-positioning-custom-fonts-stri