d3.js：鼠标悬停时工具提示和属性更改

Question

我已经集成了 tooltips by Caged in my d3 visualization (Fiddle)。他们被简单地称为

.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");
})

如何同时显示两者？

Answer 1

您需要调用工具提示功能：

.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 会自动调用作为参数传递的函数。

Answer 2

当您将 tip.show 函数包装在闭包中而不是直接将其作为回调传递时，您需要像调用任何其他函数一样调用它

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

已更新 fiddle：https://jsfiddle.net/ejddhdpb

d3.js：鼠标悬停时工具提示和属性更改

d3.js: tooltip and attribute change on mouseover

javascript

d3.js

tooltip