使用react-vega和React访问vega视图

Question

我正在使用react-vega显示一个Vega图表。

下面是我认为我的组件应该是什么样子的。不幸的是，它永远不会渲染。

export default function Chart(props) {
  const [data, setData] = useState({table: []}); // Populated elsewhere
  const [spec, setSpec] = useState({}); // Populated elsewhere
  const [view, setView] = useState(null);

  return <Vega data={data} spec={spec} onNewView={newView => setView(newView)} />
}

我假设我不应该在渲染时使用setView。但是，我还可以如何访问Vega的视图？

Answer 1

与通常的情况一样，提出问题会提示答案。我意识到React不需要参与其中。

export default function Chart(props) {
  const [data, setData] = useState({table: []}); // Populated elsewhere
  const [spec, setSpec] = useState({}); // Populated elsewhere

  const handleNewView = view => {
    // Do something with the view, such as updating the value of a signal.
    view.signal('xDomain', [props.xMin, props.xMax]).run();
  };

  return <Vega data={data} spec={spec} onNewView={handleNewView} />
}

Answer 2

我认为你的原始代码的问题出在newView上。它应该是从useState获取的view。

const [view, setView] = useState()

return <Vega data={data} spec={spec} onNewView={view => setView(view)} />