Vega-tooltip in Reactアプリケーション

Question

私はvega-liteをデータ視覚化に使用するReactアプリケーションを持っています。私はベガ（https://github.com/vega/vega-tooltip）のための公式のツールチップのアドオンを使用しようとしましたが、私はリアクションコンポーネントでそれを行う方法がわかりません。

これは私が持っているコンポーネントです。

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; 

ベガ - ツールチップの文書から、それは私がモジュールをインストールすることができますし、私はこれをしなければならないと述べている：

<!-- 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';

そして、あなたのVegaChart