我使用 KineticJS 和 D3.js 制作了以下内容。我使用 KineticJS 让我在用户将鼠标悬停在其中一个点上时弹出工具提示。但是,由于画布的边界,工具提示看起来被切断。有什么办法可以让它出现而不被剪掉吗?
整个代码本身非常庞大,并且包含很多不相关的内容,所以我发布了相关的片段:
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);
如果不幸的是工具提示是在画布中绘制的,则不会。您当然可以使用 html 创建工具提示或使用画布上的 title 属性。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)