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

Question

我有一个基本上是导航元素的条形图，所以我需要易于预测滚动行为在酒吧。从本质上讲，我需要确保小酒吧和大酒吧一样轻松点击，所以我将整个栏目设置为可点击翻转。

这里是我指的是行为的一个例子：

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

我会试着与D3和SVG要做到这一点，却发现它是难以管理的Z-指标svg元素和div（或svg元素和其他svg元素，老实说我忘记了这是一个棘手点的确切性质）。但是我记得我得出结论：唯一有效的方法是让每个列都有3个单独的svg元素，基本上是顶部背景，条形图，然后是底部背景，并手动将所有3个项目每当其中一个悬停时显示翻转更改。

我最终放弃了svg，最终使用了所有使用d3的div来使用缩放方法，并使用knockout.js模板手工绘制所有内容。但是现在我正在寻找200行重构的javascript，我想知道如果d3会给我一个更清晰的解决方案。我是否错过了D3中能够轻松完成我所期望的任何事情？

Answer 1

对你而言，使柱子变得轻松可靠！我使用的技术是一个带有指针事件的不可见覆盖：all，并且可选地将mouseover监听器分配给父svg：g元素，而不是其中一个rects。

每个杆的结构是这样的：

<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垂直偏移。红色负面报道也是如此。

简而言之，带指针事件的隐形矩形都会接收该条的所有指针事件。所以，你可以使用：将鼠标悬停在父摹元素的样式，比如调整悬停在栏的颜色：

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

同样，你可以注册“鼠标悬停”和父g组件的“鼠标移开”的事件，或覆盖RECT。