尽管没有错误，但 D3 Graph 不显示任何图形（REACT）

看起来这可能需要越过终点线将我们的 D3 代码包装在 React 的useEffect钩子中。

这是一个更新的、有效的 Codesandbox。

我们可以useEffect最初调用，我们可以在数组中传递我们想要观察的图表的任何数据useEffect作为参数。

这很有效，因为useEffect在 DOM 元素第一次被渲染时被调用，这就是为什么它是访问存在于svgref属性中的 DOM 元素的最佳时间。

每次您的组件渲染时，它都会调用useEffect. 您可以通过将参数传递到其数组中来观察更改，但是如果您只想useEffect在组件第一次挂载时运行，则可以将该数组留空。

根据我的经验，这是一个有用的模式：

function YourChartCode({ data, property }) {
  const yourRef = useRef();

  // will be called initially and on every data change
  useEffect(() => {
    const svg = d3.select(yourRef.current);
    
    // do D3 stuff here
    // leave array empty or pass arguments you're watching into this array
  }, [data, dimensions, property])

 return (
  <svg ref={yourRef}></svg>
 )
}