47 lines
1.3 KiB
TypeScript
47 lines
1.3 KiB
TypeScript
import React, { useRef, useLayoutEffect } from 'react';
|
|
import * as d3 from "d3";
|
|
|
|
export const YAxis: React.FC<{
|
|
scale: d3.ScaleLinear<number, number>
|
|
}> = ({ scale }) => {
|
|
|
|
const ref = useRef<SVGSVGElement>(null);
|
|
|
|
useLayoutEffect(() => {
|
|
if (ref.current == null) {
|
|
return
|
|
}
|
|
const axisGenerator = d3.axisLeft(scale).ticks(6);
|
|
d3.select(ref.current)
|
|
.attr('class', 'y-axis')
|
|
.call(axisGenerator)
|
|
.call(g => g.selectAll('.tick text').remove())
|
|
.call(g => g.selectAll('.tick line').remove())
|
|
.call(g => g.selectAll('.domain').remove());
|
|
}, [scale]);
|
|
|
|
return <g ref={ref} />;
|
|
};
|
|
|
|
export const XAxis: React.FC<{
|
|
scale: d3.ScaleLinear<number, number>
|
|
}> = ({ scale }) => {
|
|
|
|
const ref = useRef<SVGSVGElement>(null);
|
|
|
|
useLayoutEffect(() => {
|
|
if (ref.current == null) {
|
|
return
|
|
}
|
|
const axisGenerator = d3.axisBottom(scale).ticks(6);
|
|
d3.select(ref.current)
|
|
.attr('class', 'x-axis')
|
|
.call(axisGenerator)
|
|
.call(g => g.selectAll('.tick text').remove())
|
|
.call(g => g.selectAll('.tick line').remove())
|
|
.call(g => g.selectAll('.domain').remove());
|
|
}, [scale]);
|
|
|
|
return <g ref={ref} />;
|
|
};
|