D3和React Hooks-如何在不重绘整个图表的情况下更新柱线？

问题描述

我是D3的新手，我正在尝试创建BarChart组件。 在 exit（）和 remove（）函数下面的代码中，它们不起作用，并且每次绘制新图表而不是用新值更新条形图。

我尝试使用这条线 selectAll（'svg> g'）。remove（）; ，但它会重绘整个图表 数据更新的时间。

我还尝试在 useEffect 之外创建SVG，但是它不起作用。

import React,{ useEffect,useRef } from 'react';
import {
    select,selectAll,max,scaleLinear,scaleBand
} from 'd3';
import { BarChartContainer } from './BarChart.style';

const DEFAULT_MARGIN = { top: 25,right: 20,bottom: 20,left: 55 };
const BAR_PADDING_RATIO = 0.25;
const ALL_BARS_CLASS = 'bars';

const BarChart = ({ dataset,onBarClick,size }) => {
    const svgRef = useRef(null);

    const margin = DEFAULT_MARGIN;

    const width = size.width - margin.left - margin.right;
    const height = size.height - margin.top - margin.bottom;

    const getXScale = () =>
        scaleLinear()
            .domain([0,max(dataset,d => d.value)])
            .range([0,width]);

    const getYScale = () =>
        scaleBand()
            .domain(dataset.map(d => d.label))
            .range([0,height])
            .padding(BAR_PADDING_RATIO);

    const drawBars = (svg,xScale,yScale) => {
        // HORIZONTAL BARS
        const bars = svg.append('g').attr('class',ALL_BARS_CLASS);
        const rects = bars.selectAll('rect').data(dataset);

        rects
            .exit()
            .transition()
            .duration(700)
            .attr('width',0)
            .attr('x',0)
            .remove();

        // UPDATE
        rects
            .transition()
            .duration(700)
            .attr('x',0)
            .attr('y',d => yScale(d.label))
            .attr('width',d => xScale(d.value))
            .attr('height',yScale.bandwidth())
            .attr('fill','blue');

        rects
            .enter()
            .append('rect')
            .attr('class','bar')
            .attr('x',1)
            .attr('y',d => yScale(d.label))
            .attr('height',yScale.bandwidth())
            .transition()
            .duration(700)
            .attr('width',d => xScale(d.value))
            .attr('fill','green')
    };

    useEffect(
        () => {
            // remove all nested groups and redraw the chart when data changes
            // selectAll('svg > g').remove();

            // include the SVG and nested g element in which to plot the visualization
            const svg = select(svgRef.current)
                .attr('viewBox',`0 0 ${size.width + margin.left} ${size.height + margin.top}`)
                .append('g')
                .attr('transform','translate(85,15)');

            // SCALES
            const xScale = getXScale();
            const yScale = getYScale();
            // BARS
            drawBars(svg,yScale);
        },[JSON.stringify(dataset)]
    );

    return (
        <BarChartContainer>
            <svg ref={svgRef} />
        </BarChartContainer>
    );
};

export default BarChart;

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）