[英]Vega-tooltip in React application
我有一个使用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组件中是行不通的。 有任何想法吗?
您的react-vega-lite
必须已经包含vega-lite
。 所以
import * as vega from 'vega-lite';
而把其余的componentDidMount
您的VegaChart
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.