Question

我具有以下组件，该组件应生成d3条形图并每3秒更新一次。它每3秒从其父级接收一个数据集。现在，它会生成图表，但不会对其进行更新。我可以确认数据集每3秒更新和接收一次，然后触发useEffect。我试图设置时间间隔并替换useRef，但是它不起作用。

有什么主意吗？我应该以其他方式构造这种组件以生成D3元素吗？让我知道您是否需要更多信息。谢谢

import React, { useRef, useEffect } from "react";

import * as d3 from "d3";

export const BarChart = ({ dataset }) => {
  const ref = useRef();

  useEffect(() => {
    if (dataset && dataset[0].valor) {
      const svgHeight = 200;
      const svgWidth = 350;
      const barPadding = 30;
      const barWidth = svgWidth / dataset.length;

      const svgElement = d3
        .select(ref.current)
        .attr("width", svgWidth)
        .attr("height", svgHeight);

      svgElement
        .selectAll("rect")
        .data(dataset)
        .enter()
        .append("rect")
        .attr("y", d => svgHeight - d.valor - 40)
        .attr("x", (d, i) => i * barWidth)
        .attr("height", d => d.valor)
        .attr("width", barWidth - barPadding)
        .attr("fill", d => (d.valor > 47 ? "blue" : "red"));
    }
  }, [dataset]);

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

Answer 1

我找到了解决方案。这个问题与useRef无关，而是与我编写的d3代码有关，而不是我应该使用.join（）而不是.enter（）。append（'rect'）。见下文：

svgElement
        .selectAll("rect")
        .data(dataset)
        .join("rect")
        .attr("y", d => svgHeight - d.valor - 40)
        .attr("x", (d, i) => i * barWidth)
        .attr("height", d => d.valor)
        .attr("width", barWidth - barPadding)
        .attr("fill", d => (d.valor > 47 ? "blue" : "red"));
    }

在useRef对象更新后，React组件未呈现

1 个答案: