React D3.js 渲染多个树形图答案

【问题标题】：React D3.js render multiple treemap chartsReact D3.js 渲染多个树形图
【发布时间】：2021-07-22 02:31:41
【问题描述】：

我在 React 中构建了一个组件，用 D3.js 渲染 10 个图表

容器调用一个 API，它返回一个包含 10 个对象的数组，对于每个对象，我想用 children 键中的数据呈现一个图表。

我有一张地图，可以打印 10 个具有不同动态 id 的标签，在组件中，我有逻辑使用列表中每个对象的数据呈现单个图表。

我正在选择

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

但结果是我只渲染了一张图表，里面有很多数据，而其他所有的svg都是空的。

另外调试我不明白发生了什么......

这里是一个沙盒：

建议？

【问题讨论】：

【解决方案1】：

你不能像这样选择一个元素：

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

它实际上是获取文档中的第一个 svg 并设置其 id。

正确的选择方法是：

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

【讨论】：