通过getBoundingClientRect()获取正确的视口坐标

时间:2013-11-21 01:12:08

标签: javascript svg d3.js coordinates

将完成的触摸应用于交互式信息图表,我将HTML页面上的SVG对象的对齐方式从左侧更改为居中。这一变化打破了每个州出现的小弹出窗口的位置。这是左对齐版本,它可以正常工作:

http://www.50laboratories.com/demographicclout/demographicclout-left.html

中心版本,弹出窗口错误:

http://www.50laboratories.com/demographicclout/demographicclout-centered.html

以下是使用getBoundingClientRect()确定弹出位置的代码:

targetbackground = document.getElementById(selectedstate + mapyear);
targetwidth=targetbackground.getBoundingClientRect().width;
targetex = targetbackground.getBoundingClientRect().left + (targetwidth/2)+excorrection;
targetwye = targetbackground.getBoundingClientRect().top + wyecorrection;
d3.select("#datapopup").attr("transform", "translate(" + targetex + "," + targetwye + ")");

显然,getBoundingClientRect()返回的距离是浏览器窗口的左上角,而不是SVG视口的左上角。如何始终获取正确的坐标值,即从视口的原点开始?

1 个答案:

答案 0 :(得分:0)

使用SVG的getBBox()方法:

targetbackground = document.getElementById(selectedstate + mapyear);
targetwidth = targetbackground.getBBox().width;
targetex = targetbackground.getBBox().x + (targetwidth/2) + excorrection;
targetwye = targetbackground.getBBox().y + wyecorrection;
d3.select("#datapopup").attr("transform", "translate(" + targetex + "," + targetwye + ")");