React中使用react-vega嵌入vega-lite动态传数据报错排查

问题复现 #

尝试1：spec内硬编码数据（运行正常） #

将数据直接硬编码在spec配置中时，径向饼图可正常渲染，代码如下：
radialChart.js

import { createClassFromSpec } from "react-vega";

export const RadialChart = createClassFromSpec({
  spec: {
    $schema: "https://vega.github.io/schema/vega-lite/v5.json",
    data: {
      values: [
        {
          "i-type": "A",
          count: 3,
          color: "rgb(121, 199, 227)"
        },
        {
          "i-type": "B",
          count: 20,
          color: "rgb(26, 49, 119)"
        },
        { "i-type": "C", count: 24, color: "rgb(18, 147, 154)" }
      ]
    },
    description: "A simple pie chart with labels.",
    encoding: {
      theta: { field: "count", type: "quantitative", stack: true },
      color: { field: "color", type: "nominal", legend: null, scale: null }
    },
    layer: [
      {
        mark: { type: "arc", outerRadius: 80 }
      }
    ]
  }
});

index.js

import { RadialChart } from "./radialChart.js";
import "./styles.css";
function App() {
  return (
    <div className="App">
      <h1>react-vega-lite test</h1>
      <RadialChart />
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

尝试2：按官方文档动态传入数据（运行失败） #

为满足动态数据需求，将spec中data字段改为命名数据集格式"data": [{ "name": "table" }]，把数据抽离为独立radialData.js文件导出数组，在index.js中引入后给组件传入属性data={{ table: radialData }}，运行后抛出错误：

Error: Unrecognized data set: table
    at error (vega-util/build/vega-util.module.js:517:9)
    at dataref (vega-view/build/vega-view.module.js:75:31)
    at View.change (vega-view/build/vega-view.module.js:86:19)
    at updateSingleDatasetInView (react-vega/esm/utils/updateSingleDatasetInView.js:13:12)
    at eval (react-vega/esm/utils/updateMultipleDatasetsInView.js:9:43)
    at Array.forEach (<anonymous>)
    at updateMultipleDatasetsInView (react-vega/esm/utils/updateMultipleDatasetsInView.js:8:21)
    at eval (react-vega/esm/Vega.js:66:50)
    at eval (react-vega/esm/VegaEmbed.js:52:13)

同时伴随警告：

WARN Infinite extent for field "count_end": [Infinity, -Infinity] 
WARN Infinite extent for field "count_end": [Infinity, -Infinity] 

后续尝试直接给组件传入带values字段的data属性，依然无法正常渲染。 #

问题根因 #

核心错误是spec中命名数据源的格式不符合vega-lite规范：

• vega-lite 顶层单数据源的定义格式为对象，不需要包裹数组
• 数组格式的data仅用于原生vega（非lite版本），或vega-lite需要同时定义多个顶层数据源的场景
  将单数据源写成数组格式[{ "name": "table" }]，会导致react-vega初始化图表实例时，无法正确注册名为table的数据集，后续传入动态数据调用更新方法时，就会找不到对应数据集抛出错误。
  后续出现的Infinite extent警告是连锁反应：数据集不存在，图表拿不到count字段的有效值，计算比例尺范围时得到空值，就会触发无穷范围的警告。

修复方案 #

• 修正spec中的data定义，把数组格式改为对象格式：

// 错误写法
// data: [{ "name": "table" }]
// 正确写法
data: { "name": "table" }

• 正常传入动态数据即可，不需要额外包装values字段，传入的data属性key需要和spec中定义的数据集name完全一致：

// 引入抽离的数据源
import radialData from "./radialData.js";

function App() {
  return (
    <div className="App">
      <h1>react-vega-lite test</h1>
      <RadialChart data={{ table: radialData }} />
    </div>
  );
}

如果后续需要用到多个顶层数据集，再把data改为数组格式，每个数组元素对应一个带name属性的数据源定义即可，传入data属性时每个key对应一个数据源的名称。

内容的提问来源于stack exchange，提问作者Mahesha999