javascript - React 应用程序中的 Vega-tooltip

Question

我有一个 React 应用程序，它使用 vega-lite 进行数据可视化。我尝试使用 vega 的官方工具提示插件( https://github.com/vega/vega-tooltip )，但是我不知道如何在 React 组件中执行此操作。

这是我拥有的组件:

import React from 'react';
import PropTypes from 'prop-types';
import VegaLite from 'react-vega-lite';

const VegaChart = ({data, spec}) => {
return(
<div className="vega-chart-wrapper">
<VegaLite spec={spec} data={data} />
</div>
)
}

VegaChart.propTypes = {
data: PropTypes.object.isRequired,
spec: PropTypes.object.isRequired
}

export default VegaChart;

从 vega-tooltip 的文档中，它说我可以安装该模块，然后我必须这样做:

<!-- Placeholder for my scatter plot -->
<div id="vis-scatter"></div>

var opt = {
  mode: "vega-lite",
};
vega.embed("#vis-scatter", vlSpec, opt, function(error, result) {
  // result.view is the Vega View, vlSpec is the original Vega-Lite specification
  vegaTooltip.vegaLite(result.view, vlSpec);
});

这看起来像是集成到 jQuery 应用程序中的标准方法，但这在 React 组件中不起作用。有什么想法吗？

Answer 1

您的 react-vega-lite 必须已包含 vega-lite。所以

从 'vega-lite' 导入 * as vega;

并将其余部分放入 VegaChart 的 componentDidMount 中