45 lines
1.2 KiB
TypeScript
45 lines
1.2 KiB
TypeScript
import * as d3 from "d3";
|
|
import React, { useLayoutEffect, useRef } from "react";
|
|
|
|
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} />;
|
|
};
|