D3.js SVG对象并没有在每次运行react项目时显示

Question

我创建了一个基本的D3 svg，只是为了用react测试一些东西。作为参考，这里是我的代码：

App.js

import './App.css';
import Graph from './Graph/Graph';
function App() {
return (
<Graph />
);
}
export default App;

Graph.js

import * as d3 from "d3"
function Graph(props) {
let svg = d3.select("svg")
svg.append('rect')
.attr("height", 10)
.attr("width", 10)
.style("fill", "Green");

return (
<div>
<svg id="svgID" width="640" height="480"></svg>
<script src="https://d3js.org/d3.v5.min.js"></script>
<script src="index.js"></script>
</div>
)
}
export default Graph

我遇到的问题是，它有时只在哪里加载绿色矩形，我似乎无法控制它何时加载和何时不加载。

我认为这可能是因为SVG在它有时间附加任何内容之前就被返回了，但是，我不确定是否有修复方法。有什么帮助吗？

Answer 1

您需要引用在渲染之间持续存在的svgDOM元素。React API为您提供了useRef来使用功能组件(请参阅文档(。

要将DOM元素与引用绑定，需要使用ref JSX arrtibute。

<svg ref={svgRef} id="svgID" width="640" height="480"></svg>

由于useRef不知道它何时与DOM元素绑定，因此需要将"；ref"；使用useEffect钩子返回以检查current何时与svgDOM元素绑定。

import React, { useRef, useEffect } from 'react'
import * as d3 from "d3"
function Graph(props) {
const svgRef = useRef(null);
useEffect(
() => {
// Check that svg element has been rendered
if(svg.current) {
let svg = d3.select(svgRef.current)
svg.append('rect')
.attr("height", 10)
.attr("width", 10)
.style("fill", "Green");
}
}
},[svgRef.current])

return (
<div>
<svg ref={svgRef} id="svgID" width="640" height="480"></svg>
</div>
)
}
export default Graph