Javascript 在d3中是否可能有相互交互的分层svg元素？

我有一个条形图，它基本上是一个导航元素，所以我需要简单的可预测的滚动行为。基本上，我需要确保小条和大条一样容易点击，所以我已经将整个列设置为可点击的滚动

下面是我所指行为的一个例子：

我曾尝试使用d3和svg来实现这一点，但发现很难管理svg元素和div（或者svg元素和其他svg元素，老实说，我忘记了这是一个症结所在的确切性质）。但我记得我得出的结论是，实现我所期望的唯一有效方法是让每一列都是3个独立的svg元素，基本上是一个顶部背景、一个条形图，然后是一个底部背景，并在其中一个悬停时手动触发所有3个项目以显示滚动变化

---

我最终放弃了svg，使用了所有div，只使用d3作为缩放方法，并使用knockout.js模板手工绘制所有内容。但现在我在看200行重构javascript，我想知道d3是否会给我一个更干净的解决方案。我是否在d3中遗漏了任何可以轻松完成我所寻找的内容的内容？

你真是太好了，因为你可以轻松地将这些列悬停！我将使用的技术是一个不可见的覆盖，其中包含指针事件：all，并且可以选择将mouseover侦听器分配给父svg:g元素，而不是一个rect

每个条的结构如下所示：

<g class="bar" transform="translate(0,…)">
  <rect class="green"></rect>
  <rect class="overlay"></rect>
</g>

绿色矩形正好是条的高度，垂直偏移，使条的底部位于y=0。红色的负矩形也是一样

简言之，带有指针事件的不可见rect all接收该条的所有指针事件。因此，您可以在父g元素上使用：hover样式，例如在hover上调整条颜色：

.bar:hover .green {
  fill: lightgreen;
}

同样，您可以在父g元素或overlay rect上注册“mouseover”和“mouseout”事件

.bar:hover .green {
  fill: lightgreen;
}