我使用 KineticJS 和 D3.js 制作了以下内容。当用户将鼠标悬停在其中一个点上时,我使用 KineticJS 让我弹出工具提示。但是,由于 Canvas 的边界,工具提示似乎被切断了。有没有一种方法可以让它在不被剪裁的情况下显示出来?
整个代码本身非常庞大并且包含很多不相关的东西所以我发布了相关的片段:
this.stage = new Kinetic.Stage({
container: 'canvas',
width: this.WIDTH,
height: this.HEIGHT
});
this.circlesLayer = new Kinetic.Layer();
this.tooltipLayer = new Kinetic.Layer();
this.stage.reset();
this.stage.clear();
// Some d3 specific code
this.xRange.domain([
d3.min(this.data, function(d) {
return d.x;
}), d3.max(this.data, function(d) {
return d.x;
})]);
this.yRange.domain([
d3.min(this.data, function(d) {
return d.y;
}), d3.max(this.data, function(d) {
return d.y;
})]);
var axes_transition = d3.select("#" + this.div).transition().duration(1000).ease("exp-in-out")
// transition the axes
axes_transition.select(".x.axis").call(this.xAxis);
// Drawing the circles
this.last = this.data.map(this.position);
this.last.forEach(this.kineticCircle);
// Setting up the tooltip
this.tooltip = new Kinetic.Text({
text: "",
fontFamily: "Calibri",
fontSize: 12,
padding: 5,
visible: false,
fill: "black",
//alpha: 0.75,
textFill: "white"
});
this.tooltipLayer.add(this.tooltip);
this.stage.add(this.circlesLayer);
this.stage.add(this.tooltipLayer);
最佳答案
不幸的是,如果工具提示是在 Canvas 中绘制的,则不会。您当然可以使用 html 创建工具提示,或者改用 Canvas 上的 title 属性。
关于javascript - Canvas 工具提示出现在 Canvas 外?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12098286/