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}`);