使用 react-vega 和 React 访问 Vega 的视图答案

【问题标题】：Access Vega's view with react-vega and React使用 react-vega 和 React 访问 Vega 的视图
【发布时间】：2020-01-17 23:07:04
【问题描述】：

我正在使用react-vega 来显示Vega 图表。我想访问 Vega 的视图，但不知道如何通过 React 使用提供视图的 onNewView 回调。

我认为我的组件应该是这样的。不幸的是，它从不渲染。

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 的视图？

【问题讨论】：

标签： reactjs vega vega-lite

【解决方案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} />
}

【讨论】：

【解决方案2】：

我认为您原始代码的问题在于newView。应该是从useState得到的view。

const [view, setView] = useState()

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

【讨论】：

谢谢！虽然我无法验证您的回答，但感谢您的帮助。
其实我撤回了我上面的建议。你的onNewView 对我来说没问题。