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

Question

我最近开始接触 Vega减少D3.js的数量编码或多或少的典型图表。但是，对于复杂的仪表板，Vega 之间的交互使用信号的图表对我来说仍然有点棘手。
有没有办法加载“标准”Vega图表到 HTML页面，然后使用 D3 访问其元素？当我部署 Vega使用 Vega-Embed 的示例，连接到图表的唯一元素是 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 类名之外，名称和 Angular 色标记属性值将作为 CSS 类名公开在包含标记实例的封闭 SVG 组 (g) 元素上(来源:https://vega.github.io/vega/docs/marks/)。
您还可以在这个可观察的笔记本中查看更复杂的示例:https://observablehq.com/@oliviafvane/hacking-a-vega-lite-map-label-positioning-custom-fonts-stri