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

Question

我有一个基本上是导航元素的条形图，因此我需要在条形图上进行易于预测的翻转行为。本质上，我需要确保小条与大条一样容易被点击，因此我将整个列设置为可点击的滚动条。

这是我所指的行为示例：

screenshot http://img6.imageshack.us/img6/6674/screengraph.png

我曾尝试使用 d3 和 svg 执行此操作，但发现很难管理 svg 元素和 div（或 svg 元素和其他 svg 元素）之间的 z-indexes，老实说，我忘记了它的确切性质是一个症结所在）。但我记得得出的结论是，使我正在寻找的唯一有效方法是让每一列是 3 个单独的 svg 元素，基本上是顶部背景、条形图和底部背景，并手动触发所有 3 个项目以只要将其中一个悬停在上面，就会显示翻转变化。

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

Answer 1

让列轻松悬停，真是太好了！我将使用的技术是一个不可见的覆盖指针事件：全部，并可选择将鼠标悬停侦听器分配给父 svg:g 元素而不是矩形之一。

每个条的结构如下所示：

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

（您可能还想添加其他内容，例如屏幕截图中突出显示的“14”，您将其实现为另一个带有圆角和文本元素的矩形。）

覆盖矩形是图表的全高（在您的示例中为 70 像素）。它具有以下样式：

.overlay {
  fill: none;
  pointer-events: all;
}

绿色矩形只是条的高度，并垂直偏移，因此条的底部位于 y=0。红色的负矩形也一样。

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

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

同样，您可以在父 g 元素或覆盖矩形上注册“mouseover”和“mouseout”事件。