如何解决D3:防止工具提示开箱即用
我有一些图表,例如折线图和面积图,但工具提示是开箱即用的。 Click here to check issue。特别是当它在移动视图中时。在这种特殊情况下,我希望工具提示在接近右边框时持续向左呈现。
下面是代码。如果需要更多其他信息,我很乐意分享更多信息。提前致谢!
const body = document.body;
const docElem = document.documentElement;
const scrollTop = window.pageYOffset || docElem.scrollTop || body.scrollTop;
const scrollLeft = window.pageXOffset || docElem.scrollLeft || body.scrollLeft;
const clientTop = docElem.clientTop || body.clientTop || 0;
const clientLeft = docElem.clientLeft || body.clientLeft || 0;
//var y = box.top + scrollTop - clientTop;
let y = d3.event.clientY + scrollTop - clientTop;
let x = d3.event.clientX + scrollLeft - clientLeft;
const tooltipWidth = tooltip.width();
const tooltipHeight = tooltip.height();
x = (x > tooltipWidth / 2 + 16) ? x - tooltipWidth / 2 : 16;
y = (y < tooltipHeight + 30 + 3.5) ? 5 : y - tooltipHeight - 25 - 3.5;
tooltip
.css('left',Math.max(0,x) + 'px')
.css('top',y + 'px');
用于理解某些值来自何处的附加代码:
// show tooltip
const tooltip = $('div.widget-tooltip');
let tooltipText = '';
...
tooltip.html(tooltipText);
tooltip.show().css('opacity',1);
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。