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

Posted 2023-02-16

【中文标题】有没有办法用 D3.js 修改 Vega 图表？

【英文标题】：Is there a way to modify Vega charts with D3.js?

【发布时间】：2021-05-21 04:26:51

【问题描述】：

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

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

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

换句话说，有没有解决方案来导出带有可访问 DOM 元素的 Vega？

【问题讨论】：

这是一个非常相关的问题！我也一直想知道如何做到这一点，但还没有找到任何东西。 AFAIK 应该可以将带有 vega-embed 的图表渲染到 SVG？

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

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

【讨论】：

哇！这正是我一直在寻找的！非常感谢@93degree！