Javascript getBoundingClientRect返回错误的结果

我正在努力确定DOM中元素的当前位置和大小。我在屏幕右侧放了一个片段来演示一个基于卡的系统

我试图构建的行为是，当你点击其中一张卡时，会添加另一张卡（最终在下面，但现在在上面），它会飞到屏幕的左上角，然后填满可用空间

d3.选择全部（“属性卡”）。在（“单击”上，功能（d）{
var rect=this.getBoundingClientRect（）；
var卡=d3。选择（“主体”）
.附加（“div”）
.attr（“类”、“卡”）
.style（“背景”、“透明”）
.style（“边框”、“细实心红色”）
.style（“左”，矩形左+“px”）
.style（“top”，rect.top+“px”）
.style（“宽度”，“右直-左直）+“px”）
.style（“高度”，“正下方-正上方）+“px”）
.风格（“位置”、“绝对”）；
});
html{
身高：100%；
保证金：0；
字体系列：Arial；
溢出：隐藏；
}
身体{
身高：100%；
}
svg{
背景：#2c272b；
宽度：100%；
身高：100%；
}
.径向菜单.段{
填充：#3b3944；
}
.径向菜单.段：悬停{
填充：#535060；
}
.放射状菜单.符号{
指针事件：无；
填充物：白色；
}
.径向菜单.symbol.icon{
字体系列：“FontAwesome”；
}
.梁{
冲程：#fff；
}
.行星圈{
填充：#399745；
行程：3b3944；
笔画宽度：0；
行程：33,11；
}
.行星相关{
填充：无；
行程：3b3944；
笔划数组：无；
笔划宽度：25px；
}
.行星文本{
填写：#000；
不透明度：0.4；
文本锚定：中间；
指针事件：无；
-webkit触摸标注：无；
-webkit用户选择：无；
-khtml用户选择：无；
-moz用户选择：无；
-ms用户选择：无；
用户选择：无；
}
.星球.名字{
字号：2.5em；
宽度：94%；
保证金：125px 0px 0px 10px；
}
.planet.selected文本{
填充物：白色；
不透明度：1；
}
.planet.focused文本{
填充物：白色；
不透明度：1；
}
.月圆{
填充：#3b3944；
}
.月亮：悬停{
填充：#535060；
}
.moon文本{
填充物：白色；
文本锚定：中间；
指针事件：无；
}
.重力{
行程：3b3944；
填充：#3b3944；
笔划线头：圆形；
笔画宽度：2px；
}
.信用卡清单{
背景：#2c272b；
位置：绝对位置；
排名：0；
右：0；
宽度：200px；
最小高度：100%；
不透明度：1；
}
.卡片{
背景：#dedede；
边框：2px实心#ebebebeb；
保证金：5px 5px 5px 5px；
边界半径：8px；
填充：5px15px 5px 15px；
-webkit触摸标注：无；
-webkit用户选择：无；
-khtml用户选择：无；
-moz用户选择：无；
-ms用户选择：无；
用户选择：无；
}
.名片.头衔{
字体大小：粗体；
}
.卡片.摘要{
颜色：#cc8b11；
字体大小：粗体；
字体大小：12px；
}
.卡片.摘要.摘要项{
保证金：0；
}
/*#sourceMappingURL=style.css.map*/

名称
成本
平均：900万英镑
总计：27亿英镑
开始日期最早：2007年1月31日最晚：2019年11月27日
已启用
True:71%
False:29%
状态
红色：11%
琥珀色：36%
绿色：41%
我非常困惑，但我成功地让它按我想要的方式工作。我更改了计算，根据一点猜测工作，将填充、边距和边框考虑在内，并修改了一些样式以验证它是否仍然有效。这给了我以下计算：

    var rect = element.getBoundingClientRect();
    rect = {
        left: rect.left - margin.left,
        right: rect.right - margin.right - padding.left - padding.right,
        top: rect.top - margin.top,
        bottom: rect.bottom - margin.bottom - padding.top - padding.bottom - border.bottom  
    };
    rect.width = rect.right - rect.left;
    rect.height = rect.bottom - rect.top;
    return rect;

奇怪的是，当我尝试将其插入我的应用程序时，它根本不起作用。去掉一些填充物，结果是：

rect = {
        left: rect.left - margin.left,
        right: rect.right - border.right,
        top: rect.top - margin.top,
        bottom: rect.bottom - border.bottom - border.top
    };
    rect.height = rect.bottom - rect.top;
    rect.width = rect.right - rect.left;
    return rect;


函数getBoundingRect（元素）{
var style=window.getComputedStyle（元素）；
var保证金={
左：parseInt（样式[“左边距”]），
右：parseInt（样式[“右边空白]），
顶部：parseInt（样式[“页边空白顶部]），
底部：parseInt（样式[“页边距底部”]）
};
变量填充={
左：parseInt（样式[“padding left”]），
右：parseInt（样式[“padding right”]），
顶部：parseInt（样式[“padding top”]），
底部：parseInt（样式[“填充底部”]）
};
变量边框={
左：parseInt（样式[“边框左”]），
右：parseInt（样式[“右边框]），
顶部：parseInt（样式[“边框顶部]），
底部：parseInt（样式[“边框底部”]）
};
var rect=element.getBoundingClientRect（）；
矩形={
左：rect.left-m
d3.selectAll("attribute-card").on("click", function (d) {

   var bodyRect = document.body.getBoundingClientRect(); // Get potential offset of the page's body node
   var rect = this.getBoundingClientRect(); // This gives coordinates relative to the viewport, not relative to the body's origin
   var card = d3.select("body")
          .append("div")
            .attr("class", "card")
            .style("background", "transparent")
            .style("border", "thin solid red")
            .style("left", (rect.left - bodyRect.left) + "px") // Correct for the body's offset
            .style("top", (rect.top - bodyRect.top) + "px") // Correct for the body's offset
            .style("width", (rect.right - rect.left) + "px")
            .style("height", (rect.bottom - rect.top) + "px")
            .style("position", "absolute");
});