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

Question

我正在尝试从 https://www.d3-graph-gallery.com/graph/correlogram_scatter.html 移植代码以做出反应。

现在我知道我需要更改很多东西，这样我就不会在每次重新渲染时都创建一个新的 SVG，我只是想确保在开始之前我可以让示例图正常工作进行更改。

但是没有任何渲染，控制台也没有错误，这使得调试变得非常困难。

我将一个示例放入代码沙箱中，它似乎模仿了我在这端看到的内容。

我错过了什么？

https://codesandbox.io/s/compassionate-haze-9excy?file=/src/App.js

Answer 1

看起来这可能需要完成的是将我们的 D3 代码包装在 React 的 useEffect 钩子中。

Here's an updated, working Codesandbox.

我们可以最初调用 useEffect，然后我们可以将我们想要观察的任何数据传递到 useEffect 作为参数的数组中。

这很好用，因为 useEffect 在 DOM 元素第一次被渲染时被调用，这就是为什么它是访问属性中 DOM 元素的最佳时机svg 参考

每次您的组件呈现时，它都会调用 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>
 )
}

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

D3 Graph displays no graph despite no errors (REACT)

d3.js

reactjs