无法在反应中嵌入 vega-lite 可视化

Question

我正在尝试在反应中使用 vega-lite。 我在下面尝试过（检查codesandbox ）及其工作：

尝试 1 - 在规范中硬编码的数据（工作）

---

径向图表.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 - 文档建议的动态数据（不起作用，g）

---

但是，正如您在尝试 1 中看到的那样，数据在radialChart.js 中是硬编码的。 但我想动态传递数据。 所以，我检查了文档并找到了这个。 它建议进行以下更改：

径向图表.js

...
"data": [{ "name": "table" }],
...

径向数据.js

const data = [ ... whole data array goes here ... ];

export default data;

index.js

import radialData from "./radialData";
//...
<RadialChart data={{ table: radialData }} />

但是它不起作用。 它给出以下错误：

Error: Unrecognized data set: table
    at error (https://d78mhq.csb.app/node_modules/vega-util/build/vega-util.module.js:517:9)
    at dataref (https://d78mhq.csb.app/node_modules/vega-view/build/vega-view.module.js:75:31)
    at View.change (https://d78mhq.csb.app/node_modules/vega-view/build/vega-view.module.js:86:19)
    at updateSingleDatasetInView (https://d78mhq.csb.app/node_modules/react-vega/esm/utils/updateSingleDatasetInView.js:13:12)
    at eval (https://d78mhq.csb.app/node_modules/react-vega/esm/utils/updateMultipleDatasetsInView.js:9:43)
    at Array.forEach (<anonymous>)
    at updateMultipleDatasetsInView (https://d78mhq.csb.app/node_modules/react-vega/esm/utils/updateMultipleDatasetsInView.js:8:21)
    at eval (https://d78mhq.csb.app/node_modules/react-vega/esm/Vega.js:66:50)
    at eval (https://d78mhq.csb.app/node_modules/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] 

这是代码框。 这是 github 中中断的行，对应于此捆绑文件中的第 86 行。 这里到底出了什么问题？

更新

---

即使将数据直接传递给RadialChart也不起作用（ 沙箱链接）：

<RadialChart
    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)" }
      ]
    }}
  />

Answer 1

我猜文档指定它不正确，它应该是：

"data": { "name": "table" },

代替

"data": [{ "name": "table" }],

在radialChart.js 中。

正如您在相应的沙箱中看到的那样，更改此设置可以解决问题，并呈现可视化。

现在我已经自己解决了，如果有人告诉我如何从 react-vega 的源代码中提出这个问题，我会很高兴。