通过getBoundingClientRect（）获取正确的视口坐标

Question

将整理触摸应用于交互式图表，我将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视口的左上角。我如何始终如一地获得正确的坐标值，即从视口的原点出发？

Answer 1

使用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 + ")");