React D3.js 渲染多個樹形圖圖表

Question

我在 React 中構建了一個組件，用 D3.js 渲染 10 個圖表

容器調用一個 API，它返回一個包含 10 個對象的數組，對於每個 object，我想用 children 鍵中的數據呈現一個圖表。

我有一個 map 打印 10 個具有不同動態 id 的標簽，在組件中我有邏輯使用列表中每個 object 的數據呈現單個圖表。

我正在選擇 <svg> 標簽：

const svg = d3.select("svg").attr("id", `${data.name}`)

但結果是我只渲染了一張圖表，里面有很多數據，而其他的 svg 都是空的。

另外調試我不明白發生了什么......

這里是一個沙箱：

建議？

Answer 1

您不能 select 像這樣的元素：

const svg = d3.select("svg").attr("id", `${data.name}`);

它實際上是在文檔中獲取第一個 svg 並設置其 id。

select 的正確方法是：

const svg = d3.select(`#${data.name}`);