如何将鼠标悬停弹出窗口与 D3 (v7) 树图中的图像/媒体集成？是否可以使用 id 属性来控制单个节点的行为。我看过几篇有类似问题的帖子，但没有一个能完全回答我的问题......

CODEPEN 链接：https://codepen.io/explore_test/pen/LYyQvgq

目标：我想在我的 d3 树图中的某些节点的鼠标悬停时有一个弹出 div。此 div 将包含文本/图像/音频播放器的组合。

到目前为止的尝试：我尝试使用单独的 app.js 来触发鼠标悬停事件，就像我对标准 SVG 所做的那样，但这似乎在树中不起作用。我曾尝试使用 nodeEnter.selectAll("rect").attr("id",function (d,i) { return d.data.id; }); 为每个节点提供它自己的 ID，但我注意到我无法使用 CSS 和分配给节点的 id 控制所有行为，所以也许这就是问题所在?

我是 D3（以及一般的 JavaScript）的新手，所以请告诉我是否有更好的方法来实现这一点，即使它使用的是完全不同的库。

或者：有没有办法让侧边栏 div 在单击特定节点时显示模态内容？我猜这会依赖于相同的功能，但数据只是显示在不同的地方？

附带问题：我希望能够单独控制每个节点的样式。目前，我通过提取已添加到数据集中的 rgb 颜色等来执行此操作。是否有更简洁的方法来执行此操作，这意味着我可以直接通过 CSS 控制外观？

编辑：我已经在某种程度上使用示例 #practiceone 进行了此操作，但想知道我可以通过这种方式控制的内容是否存在限制？控制节点外观的最佳做法是什么？

预先感谢您提供的任何帮助！