Question

我已将tooltips by Caged集成到我的d3可视化中（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);
})

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

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

2 个答案: