javascript - D3.js ResizeObserver 呈现问题。调整大小后未删除轴

Question

在 D3 中尝试使用 ResizeObserver，问题是当轴重新渲染时它会留下旧渲染，留下前一个轴的“痕迹”。

代码只是一个空白图表模板，我使用 ResizeObserver 从 contentRect 中获取 div 的尺寸大小。不过，它似乎确实会调整大小。

最好用图片解释:

我的代码:

const useResizeObserver = (ref) => {
const [dimensions, setDimensions] = useState(null);

useEffect(() => {
    const observeTarget = ref.current;
    const resizeObserver = new ResizeObserver(entries => {
        entries.forEach(entry => {
            setDimensions(entry.contentRect);
        });
    });
    resizeObserver.observe(observeTarget);
    return () => {
        resizeObserver.unobserve(observeTarget);
    };
}, [ref]);

return dimensions;
};

export default function BarChart() {

const [data, setData] = useState([10]);
const svgRef = useRef();
const wrapperRef = useRef();
const dimensions = useResizeObserver(wrapperRef);

useEffect(() => {

    const margin = { top: 10, bottom: 10, right: 10, left: 10 };
    const svg = select(svgRef.current);

    if (!dimensions) return;

    // xAxis
    const xScale = scaleLinear()
        .domain([0, 10])
        .range([0, dimensions.width]);

    const xAxisFormat = number => format('')(number);

    const xAxis = axisBottom(xScale)
        .ticks(10)
        .tickFormat(xAxisFormat)
        .tickPadding(10);

    const xAxisG = svg.append('g')
        .call(xAxis)
        .attr('transform', `translate(0, ${height})`)

    svg
        .select('.xAxis')
        .call(xAxis)

    // yAxis
    const yScale = scaleLinear()
        .domain([0, 100])
        .range([height, 0]);

    const yAxisFormat = number => format('')(number);

    const yAxis = axisLeft(yScale)
        .ticks(10)
        .tickFormat(yAxisFormat)
        .tickPadding(10);

    const yAxisG = svg.append('g')
        .call(yAxis)

    svg
        .select('.xAxis')
        .call(xAxis)

},[data, dimensions]);

return (
    <React.Fragment>
    <div ref={wrapperRef}>
        <svg className="barChartSVG" ref={svgRef} width={width} height= {height} />
    </div>
    </React.Fragment>
);
}

Answer 1

只需在 useEffect 的末尾添加下一行:

return () => {
      svg.selectAll('*').remove()
    }