d3.js：鼠標懸停時的工具提示和屬性更改

我在我的d3可視化中集成了tooltips by Caged（Fiddle）。它們與d3.js：鼠標懸停時的工具提示和屬性更改

.on("mouseover", tip.show) 
.on("mouseout", tip.hide)

簡稱現在我發現我不能添加其他鼠標懸停功能，如改變我指着鼠標物體的大小和顏色。無論是工具提示或屬性的變化顯示，當我嘗試這樣的事：

on("mouseover", function(d){ 
tip.show; 
d3.select(this).attr("r", 10).style("fill", "orange"); 
}) 
.on("mouseout", function(d){ 
tip.hide; 
d3.select(this).attr("r", 6).style("fill", "red"); 
})

我怎麼能同時顯示？

來源

2016-01-12 speedymcs

你需要調用提示功能：

.on("mouseover", function(d){ 
    tip.show(d); 
    d3.select(this).attr("r", 10).style("fill", "orange"); 
}).on("mouseout", function(d){ 
    tip.hide(d); 
    d3.select(this).attr("r", 6).style("fill", "red"); 
})

tip.show和tip.hide是功能和增加括號中的名字的意思是，你打電話給他們後。當不使用匿名函數時（即function() { ... }），這是沒有必要的，因爲D3知道函數正在被傳遞並且應該在運行時被調用（即被評估）。簡而言之，D3會自動調用作爲參數傳遞的函數。

來源

2016-01-12 01:16:58

哦謝謝。那麼，另一個愚蠢的問題，爲什麼tip.show工作（如果只有它自己）？ – speedymcs

我編輯了答案來解釋。 –

謝謝。從Java來看，JavaScript通常寬鬆的規則有時會讓我感到困惑。實際上，如果我在我自己的代碼中使用'tip.show（）'與改變大小和顏色相結合，會發生這種情況：TypeError：d是未定義的，並且沒有顯示工具提示。我需要使用'tip.show（d）'作爲mzulch提出的。你知道爲什麼嗎？我更新了小提琴，以便數據綁定到圓圈，但工具提示功能仍然可以在沒有參數的情況下工作https://jsfiddle.net/ec7Lbaxf/2/ – speedymcs

當您纏繞在一個封閉的tip.show功能，而不是僅僅通過它直接作爲回調，需要調用它像任何其他功能

on("mouseover", function(d){ 
tip.show(d); 
})

更新小提琴：https://jsfiddle.net/ejddhdpb

來源

2016-01-12 01:21:28 mzulch

d3.js：鼠標懸停時的工具提示和屬性更改

回答

相關問題