简体   繁体   English

Vega-tooltip在React应用程序中

[英]Vega-tooltip in React application

I have a React application that uses vega-lite for data visualizations. 我有一个使用vega-lite进行数据可视化的React应用程序。 I tried to use the official tooltip addon for vega ( https://github.com/vega/vega-tooltip ), however I have no idea how to do it in a React component. 我尝试使用vega的官方工具提示插件( https://github.com/vega/vega-tooltip ),但是我不知道如何在React组件中做到这一点。

This is the component I have: 这是我拥有的组件:

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;

From the documentation of vega-tooltip, it says that I can install the module and then I have to do this: 从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);
});

This looks like the standard way to integrate in a jQuery application, but this is not gonna work in a React component. 这看起来像是在jQuery应用程序中进行集成的标准方式,但这在React组件中是行不通的。 Any ideas? 有任何想法吗?

Your react-vega-lite must already include vega-lite . 您的react-vega-lite必须已经包含vega-lite So 所以

import * as vega from 'vega-lite';

And put the rest in componentDidMount of your VegaChart 而把其余的componentDidMount您的VegaChart

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM