是否有可能在d3中具有相互作用的分层svg元素

Is it possible to have layered svg elements that interact with each other in d3?

本文关键字：相互作用 分层 svg 元素 有可能 d3 是否      更新时间：2023-09-26

我有一个条形图，它基本上是一个导航元素，所以我需要在条形图上轻松可预测的滚动行为。从本质上讲，我需要确保小条和大条一样容易点击，所以我把整个专栏做成了一个可点击的滚动。

以下是我所指的行为示例：

屏幕截图http://img6.imageshack.us/img6/6674/screengraph.png

我试着用d3和svg来做这件事，但发现很难管理svg元素和div之间的z索引（或者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>

（你可能还有其他想要添加的东西，比如屏幕截图中突出显示的"14"，你将其实现为另一个带有圆角和文本元素的矩形。）

overlay rect是图表的全高（在您的示例中为70px）。它有以下风格：

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

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

简而言之，具有指针事件的不可见rect都接收该条的所有指针事件。所以你可以在父g元素上使用：悬停样式，比如调整悬停上的条形图颜色：

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

同样，您可以在父g元素或overlay rect上注册"mouseover"answers"mouseout"事件。

相关文章：