D3.js D3鼠标悬停时显示工具提示
我想在每次鼠标进入一个rect并且几毫秒后鼠标在该rect上时向barchar的rect添加工具提示。我还想在鼠标离开任何矩形时删除它们 我尝试将其与d3事件绑定,并使用setTimeout/clearTimeout 它似乎可以工作,除非在工具提示的线条转换时将鼠标快速移动到不同的条中 这种情况下的问题是,工具提示在鼠标进入/离开的条之间移动 不考虑超时。工具提示的文本似乎确实做了一些奇怪的事情 让我向您展示工具提示在超时之前的显示方式: 用于绑定绘制工具提示的函数的代码:D3.js D3鼠标悬停时显示工具提示,d3.js,mouseevent,settimeout,transition,mouseenter,D3.js,Mouseevent,Settimeout,Transition,Mouseenter,我想在每次鼠标进入一个rect并且几毫秒后鼠标在该rect上时向barchar的rect添加工具提示。我还想在鼠标离开任何矩形时删除它们 我尝试将其与d3事件绑定,并使用setTimeout/clearTimeout 它似乎可以工作,除非在工具提示的线条转换时将鼠标快速移动到不同的条中 这种情况下的问题是,工具提示在鼠标进入/离开的条之间移动 不考虑超时。工具提示的文本似乎确实做了一些奇怪的事情 让我向您展示工具提示在超时之前的显示方式: 用于绑定绘制工具提示的函数的代码: ... var b
...
var bar = svg.select(".bars")
.selectAll(".barchart-group")
.data(data);
...
var come = bar.enter()
.append("rect")
.style("stroke", undefined)
.style("fill", "hsla(34, 82%, 48%, 0.79)");
...
//bind events to new bars
come.on("mouseover", delayTooltip)
.on("mouseout", removeBarTooltip);
...
tootlip相关功能的代码:
function delayTooltip(d, i) {
// this here is every rect of the bar chart
this.hoverTimeout = window.setTimeout(addBarTooltip.bind(this), 1000, d, i);
}
function addBarTooltip(d, i) {
// **** PROBLEM ****
// this executes whithout waiting the set timeout
var firstAnims = 500;
var thisbar = d3.select(this);
var tooltip = d3.select(this.parentNode);
var gRoot = d3.select(this.parentNode.parentNode);
//Lets define some points of interest
var p0 = [+thisbar.attr("x") + (barWidth - 1) / 2, +thisbar.attr("y")];
var p1 = [p0[0], +p0[1] - 9];
var p2 = [p0[0], +p0[1] - 13];
//relevant points to draw tooltips
var line = gRoot.select(".linePointers");
var text = gRoot.select(".textHelpers");
line.append("polyline")
.style("stroke-dasharray", "2,1")
.style("stroke", "black")
.attr("points", [p0, p0])
.transition("line-Y-axis")
.duration(firstAnims)
.attrTween("points", function(d, i, a) {
return d3.interpolate([p0, p0], [p0, p1]);
});
text.append("text")
.attr("dy", ".2em")
.attr("text-anchor", "middle")
.attr("x", p2[0])
.attr("y", p1[1])
.text(d.value)
.style("font-size", ".85em")
.style("opacity", 0)
.transition("text-Y-axis")
.delay(firstAnims)
.duration(300)
.style("opacity", 1)
.attr("y", p2[1]);
}
function removeBarTooltip() {
window.clearTimeout(this.hoverTimeout);
var firstAnims = 200;
var thisbar = d3.select(this);
var tooltip = d3.select(this.parentNode);
var gRoot = d3.select(this.parentNode.parentNode);
//relevant points to draw tooltips
var p0 = [+thisbar.attr("x") + (barWidth - 1) / 2, +thisbar.attr("y")];
var p1 = [p0[0], +p0[1] - 9];
var p2 = [p0[0], +p0[1] - 13];
//Lets make a group for each part of our tooltip
var line = gRoot.select(".linePointers")
.selectAll("polyline");
var text = gRoot.select(".textHelpers")
.selectAll("text");
line.transition("line-Y-axis")
.duration(firstAnims)
.attrTween("points", function(d, i, a) {
return d3.interpolate([p0, p1], [p0, p0]);
})
.remove();
text.style("opacity", 0.7)
.transition("text-Y-axis")
.delay(firstAnims)
.duration(300)
.style("opacity", 0)
.attr("dy", p0[1] - p2[1])
.remove();
}
如果可能的话,我宁愿避免添加任何其他库。试试foxToolTip.js
具有悬停和鼠标退出的延迟和过渡持续时间选项
查看我的bl.ock地址:
将鼠标悬停在文本元素上时,使用0.5秒的延迟来显示工具提示。问题出在removeBarTooltip中。让我们先看看这两条线,其中我定义了tootlip线的点:
var p0 = [+thisbar.attr("x") + (barWidth - 1) / 2, +thisbar.attr("y")];
var p1 = [p0[0], +p0[1] - 9];
在这个函数的后面,我正在做:
[...]
line.transition("line-Y-axis")
.duration(firstAnims)
.attrTween("points", function(d, i, a) {
return d3.interpolate([p0, p1], [p0, p0]);
})
.remove();
所以发生的情况是,tootlip线从一个条移动到另一个条,这是因为var p0值取决于鼠标所在的条
为了解决这个问题,我将带有attrTween的线转换更改为:
line.transition("line-Y-axis")
.duration(firstAnims)
.attrTween("points", function(d, i, a) {
var p0current = a.split(",");
var p1current = p0current.splice(2);
return d3.interpolate([p0current, p1current], [p0current, p0current]);
})
.remove();
其中,它使用参数a获取points属性的实际值,并仅基于该值插值实际MoveMeEvent
我希望尽可能避免在我的项目中添加更多LIB。你知道我做错了什么吗?你的bl.ock从你正确发布的那一天起似乎对我不起作用,你能检查一下@m-fox吗?