我的 svg 上有一条跟随鼠标指针的垂直指南,但现在更新其位置有点慢,这在鼠标快速移动时尤其明显。有没有办法减少这种滞后?
当前代码:
svg.on("mousemove", function(d) {
svg.select(".guideline")
.attr("x1", d3.mouse(this)[0]-1)
.attr("x2", d3.mouse(this)[0]-1);
});
svg.on("mouseover", function(d) {
svg.append("line")
.attr("class", "guideline")
.attr("y1", margin[0])
.attr("y2", height+margin[0])
.attr("opacity", originOpacity)
.attr("stroke", "#333")
.attr("pointer-events", "none");
});
svg.on("mouseout", function(d) {
svg.select(".guideline").remove();
});
最佳答案
您在每次鼠标移动时选择该行,而是将该行保留在变量中:
var line = svg.append("line")
.attr("class", "guideline")
.attr("y1", margin[0])
.attr("y2", height+margin[0])
.attr("opacity", 0)
.attr("stroke", "#333")
.attr("pointer-events", "none");
svg.on("mousemove", function(d) {
line
.attr("x1", d3.event.pageX-1)
.attr("x2", d3.event.pageY-1);
});
svg.on("mouseover", function(d) {
line.attr("opacity", originOpacity);
});
svg.on("mouseout", function(d) {
line.attr("opacity", 0);
});
关于svg - 有没有办法减少跟随鼠标指针的指南的滞后?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12828006/