我有一个基本上是导航元素的条形图，因此我需要在条形图上轻松预测翻转行为。基本上我需要确保小条很容易点击大条，所以我已经使整个列成为可点击的翻转。
以下是我所指的行为示例：
screenshot 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中我是否遗漏了任何可以轻松完成我想要的东西的东西？
答案 0 :(得分：2)
擅长使列易于移动！我将使用的技术是一个带有指针事件的不可见覆盖：all，并可选择将mouseover侦听器分配给父svg：g元素而不是其中一个rects。
每个栏的结构如下所示：
<g class="bar" transform="translate(0,…)">
<rect class="green"></rect>
<rect class="overlay"></rect>
</g>
（您可能还有其他想要添加的内容，例如屏幕截图中突出显示的“14”，您将其实现为另一个带圆角和文本元素的矩形。）
叠加矩形是图表的全高（在您的示例中为70px）。它具有以下风格：
.overlay {
fill: none;
pointer-events: all;
}
绿色矩形只是条形的高度，并且垂直偏移，因此条形图的底部位于y = 0。红色负面影响相同。
简而言之，带有指针事件的不可见rect会接收该条的所有指针事件。所以你可以使用：在父g元素上悬停样式，比如在悬停时调整条形颜色：
.bar:hover .green {
fill: lightgreen;
}
同样，您可以在父g元素或叠加矩阵上注册“mouseover”和“mouseout”事件。