vega-lite - 从 Vega 场景图中读取项目颜色的正确方法是什么？

Question

我正在使用vega具有自定义配色方案的图形来渲染图形。该图还有一个自定义工具提示，通过vega-tooltip. 我希望工具提示与悬停的系列颜色相同。这需要知道被悬停的特征的颜色。

到目前为止唯一有效的是这样的：

let pathGroup = [];

const view = new vega.View(parsed, {
  container: $el,
  hover: true,
  renderer: "canvas",
  tooltip: new vt.Handler({
    formatTooltip: (value, sanitize) => {
      const myPath = pathGroup.filter((s: any) => s.datum.key === value.key)[0];
      const color = myPath.items[0].items[0].stroke;

      return `
        <div id="vg-tooltip-inner">
          <span id="vg-tooltip-inner-key" style="background: ${color}"> 
            ${sanitize(value.key)}
          </span>
          <span id="vg-tooltip-inner-value">
            ${sanitize(value.value)}
          </span>
        </div>
      `;
    },
  }).call,
});

pathGroup = view.scenegraph().root.items[0].items.filter(
  (item) => item.name === "layer_0_pathgroup"
)[0].items;

我最初的想法是在我的工具提示编码中添加一个计算字段，但我无法弄清楚如何以stroke这种方式访问​​。我也不想依赖硬编码的名称，如"layer_0_pathgroup", 或内部数组中的位置。

有没有更清洁或更合适的方式来访问这样的财产stroke？

标签： vega-litevega