Question

我尝试在可缩放的圆形包装中显示工具提示。我需要在onMouseover上显示它，我能够获得警报但不能以工具提示格式显示。

有人可以帮助我做到这一点..

感谢。

Answer 1

请找到以下内容。希望这会对你有所帮助。

var data = [4, 8, 15, 16, 23, 42];

var x = d3.scale.linear()
.domain([0, d3.max(data)])
.range([0, 420]);

var tooltip = d3.select("body")
.append("div")
.style("position", "absolute")
.style("z-index", "10")
.style("visibility", "hidden")
.style("background", "#000")
.text("a simple tooltip");

d3.select("body")
.selectAll("div")
.data(data)
.enter().append("div")
.style("width", function(d) { return x(d) + "px"; })
.text(function(d) { return d; })
.on("mouseover", function(d){tooltip.text(d); return 
 tooltip.style("visibility", "visible");})
  .on("mousemove", function(){return tooltip.style("top", (d3.event.pageY-
 10)+"px").style("left",(d3.event.pageX+10)+"px");})
  .on("mouseout", function(){return tooltip.style("visibility", 
 "hidden");});

var tooltip = block是我们创建工具提示本身的地方，它只是一个默认隐藏的div，位于页面上所有元素的“上方”（使用高z-index值）。 / p>

一旦创建了它，我们就会使用多个.on方法调用添加到d3.js的条形图创建代码中，该调用接受相应的事件以及在该事件发生时触发的函数。最重要的是在第一个mouseover事件函数中，我们在其中指定tooltip.text（d），这意味着我们的工具提示的文本被设置为d的传入数据值。

在这里，你将获得我们传递的数据的自定义div工具提示。

如何在可缩放的圆形图中显示工具提示

1 个答案: