是否有可能在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。