有沒有辦法用 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