Vega-tooltip in 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; 

, 내가 모듈을 설치할 수 있다고하고 나는이 작업을 수행해야한다 :

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