1

我有一个使用 vega-lite 进行数据可视化的 React 应用程序。我尝试使用 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 组件。有任何想法吗？

4

1 回答 1

0

您react-vega-lite必须已经包含vega-lite. 所以

import * as vega from 'vega-lite';

把剩下的放进componentDidMount你的VegaChart

于 2017-09-04T13:16:53.543 回答