有没有办法用 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>

换句话说，是否有导出 Vega 具有可访问 DOM 元素的解决方案？

Answer 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>

除了 Vega 使用的默认 CSS class 名称之外，名称和角色标记属性值将作为 CSS class 名称公开在封闭的包含标记实例的 SVG 组 (g) 元素（来源：https://vega.github.io/vega/docs/marks/）。

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

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

Is there a way to modify Vega charts with D3.js?

javascript

data-visualization

d3.js

vega