Vega-tooltip在React應用程序中

Question

我有一個使用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組件中是行不通的。 有任何想法嗎？

Answer 1

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

import * as vega from 'vega-lite';

而把其余的componentDidMount您的VegaChart