import React, { useEffect, useRef, useState } from 'react';
import * as d3 from 'd3';
export default function useD3(renderChartFn : (svg : d3.Selection<SVGElement,{},HTMLElement>) => any, dependencies : any[]) {
const ref = useRef<SVGSVGElement>();
useEffect(() => {
let d3El = d3.select(ref.current)
renderChartFn(d3.select(ref.current));
return () => {};
}, dependencies);
return ref;
}
function MyChart(props : {
w: number,
h: number,
data: Array<any>
}) {
const [currentData,setCurrentData] = useState(props.data)
let svgRef = useD3((svg) => {
if (props.data === currentData) return
setCurrentData(props.data)
svg.selectAll("*").remove();
const margin = { top: 0, right: 80, bottom: 20, left: 10 };
const width = props.w - margin.left - margin.right;
const height = props.h - margin.top - margin.bottom;
const canvas = svg
.attr('width', width + margin.left + margin.right)
.attr('height', height + margin.top + margin.bottom)
.append('g')
.attr('transform', `translate(${margin.left},${margin.top})`);
const data = props.data
},[props])
return (<svg ref={svgRef} />)
}