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

Question

我最近开始使用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 元素的解决方案？

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 类名称之外，名称和角色标记属性值将在包含标记实例的封闭 SVG 组 (g) 元素上公开为 CSS 类名称（来源：https://vega.github.com）。 io/vega/docs/marks/）。

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