D3.js在鼠標懸停時更改標題文本

我正在使用D3來顯示與此處示例類似的多個條形圖（30+圖表）：http://phrogz.net/js/d3-playground/#MultiBars_HTML當用戶將鼠標懸停在條上時，我想更改標題的名稱用戶正在與之交互的圖表，以及有關用戶懸停在其上的值的信息。D3.js在鼠標懸停時更改標題文本

所以，如果我添加類似：

bars.on('mouseover', mouseoverfunc); 

function mouseoverfunc(d, i) { 
// update the title just for this chart..not all charts 
a.select("h2").text(function (d) { return "hello"; }); 
}

因此，瞭解鼠標懸停是吧[d3.select（本），我該如何選擇父，所以我可以改變一個剛剛稱號圖表？這裏有一個非常類似的例子：http://mbostock.github.com/protovis/ex/minnesota.html，我試圖在D3中複製

謝謝。

來源

2012-04-27 djazzd

最簡單的方法可能是一個屬性分配給您的標題的div，讓你用select語句找到他們，是這樣的：

d3.select("[parentBarChartID="+d.id+"]")

在 mouseoverfunc

。

或者，您couldmake您的DOM元素的層次，這樣你可以使用this.parentNode.childNodes，循環結束，直到你找到標題節點的所有孩子遍歷（請參閱如何循環子節點here。

來源

2012-04-27 05:17:12 ZachB

好，我想分配在標題爲每個圖表的屬性的想法。但是，我的'mouseoverfunc'函數具有參數i和d，條的索引和條的值。我不知道用戶正在與哪個圖表進行交互以瞭解要更改哪個屬性。我正在研究你現在穿越DOM的建議。謝謝。 – djazzd 2012-04-27 15:28:58

在這種情況下，如果'mouseoverfunc（d）'中的'd'是bar元素（不應該是數值），你應該可以使用'd.parentNode.id'來獲得正確的ID用在我上面建議的'd3.select'語句中。 – ZachB 2012-04-27 19:21:19

如果上面的'd'沒有你需要的，你也可以看'd3.event'。我認爲該屬性將是'd3.event.sourceEvent.target'。（使用'console.dir（d3.event）'與螢火蟲或您的Web控制檯打開以檢查事件的屬性。） – ZachB 2012-04-27 19:23:26

我相信以下兩個例子應該告訴你如何單獨選擇任何酒吧和觸發選擇任何特定項目的回調...

您會注意到，在回調函數「synchronizedMouseOver」和「synchronizedMouseOut」中，它們觸發了SVG畫布上多個對象的更改...單獨的條形圖，圖例項目符號和圖例文本字符串。您可以使用相同的方法來更改圖表標題。

我希望這會有所幫助。

弗蘭克

來源

2012-05-01 22:23:23

D3.js在鼠標懸停時更改標題文本

回答

相關問題