有没有办法用 D3.js 修改 Vega 图表？

Question

我最近开始进入Vega以减少D3.js编码的数量，以用于或多或少的典型图表。 然而，对于复杂的仪表板，使用信号的Vega图表之间的交互对我来说仍然有点棘手。

有没有办法将“标准” Vega图表加载到HTML页面中，然后使用 D3 访问其元素？ 当我使用Vega-Embed部署Vega示例时，连接到图表的唯一元素是 canvas：

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

换句话说，有没有办法用可访问的 DOM 元素导出Vega ？

Answer 1

将opt={renderer: 'svg'}作为参数传递给embed function 允许人们通过 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>

In addition to the default CSS class names that Vega uses, the name and role mark properties values will be exposed as CSS class names on the enclosing SVG group (g) element containing the mark instances (Source: https://vega.github. io/vega/docs/marks/ ）。

您还可以在这个可观察的笔记本中查看更复杂的示例： https://observablehq.com/@oliviafvane/hacking-a-vega-lite-map-label-positioning-custom-fonts-stri