Javascript D3.js：将堆叠在文本框上的三角形居中，文本框的值会动态变化

我已经制作了一个图形，其中一个三角形沿着鼠标的X坐标从一个矩形元素开始。 rect元素具有线性比例，可将鼠标的X坐标转换为介于[0,14]之间的值。此外，该值在三角形下方的文本框中报告。三角形和文本框都随鼠标移动

我一直试图将文本框与箭头对齐（随着文本框值的变化）。有CSS解决方案吗

这是我的密码：

const MARGIN={
左:80,，
右:80,，
前30名，
底数：30
};
const RECT_HEIGHT=50，
域=[0,14]；
让宽度=$（window.width（）-MARGIN.LEFT-MARGIN.RIGHT，
高度=$（窗口）.height（）-MARGIN.TOP-MARGIN.BOTTOM；
设值为0，
箭头位置=0；
常量格式=d3.格式（“.1f”）；
////////////////////////////////////////////////////////////
/////////////////////////SVG//////////////////////////////
////////////////////////////////////////////////////////////
常量SVG=d3。选择（“缩放”）
.append（“svg”）
.attr（“宽度”，宽度+边距。左侧+边距。右侧）
.attr（“高度”，高度+边距。顶部+边距。底部）；
常量G=SVG.append（“G”）
.attr（“转换”、“平移”（+MARGIN.LEFT+）、“+MARGIN.TOP+”）；
常量RECT=G.append（“RECT”）
.attr（“x”，0）
.attr（“y”，高度/2-（矩形高度/2））
.attr（“宽度”，宽度）
.attr（“高度”，矩形高度）；
//画三角形符号
设三角形=d3.symbol（）.type（d3.symbolTriangle）.size（300）；
常量三角形=G.append（“路径”）
.attr（“d”，三角形）
.attr（“转换”、“平移”（“+0+”，“+（高度/2+40）+”）；
//pH文本元素
常量文本=G.append（“文本”）
.attr（“id”、“pH”）
.文本（格式（值））
.attr（“变换”、“平移（0）”+（高度/2+75）+”）；
////////////////////////////////////////////////////////////
////////////////////////鳞片/////////////////////////////
////////////////////////////////////////////////////////////
常量比例=d3.scaleLinear（）
.domain（[0，宽度]）
.范围（领域）；
////////////////////////////////////////////////////////////
/////////////////////事件处理程序////////////////////////
//////////////////////////////////////////////////////////// 
“鼠标移动”（事件）=>{
设坐标=d3.指针（事件）；
attr（“transform”、“translate”（“+坐标[0]+”，“+（高度/2+40）+”）；
attr（“transform”、“translate”（“+坐标[0]+”，“+（高度/2+75）+”）；
TEXT.TEXT（格式（比例（坐标[0]））；
});
创建文本后，使用获取其宽度。我们可以在D3中对一个选择使用
node（）
，以获得DOM节点。由于文本向右移动，我们将使用文本宽度的一半将其向后移动。

（带反勾号的字符串是a）


const MARGIN={
左:80,，
右:80,，
前30名，
底数：30
};
const RECT_HEIGHT=50，
域=[0,14]；
让宽度=$（window.width（）-MARGIN.LEFT-MARGIN.RIGHT，
高度=$（窗口）.height（）-MARGIN.TOP-MARGIN.BOTTOM；
设值为0，
箭头位置=0；
常量格式=d3.格式（“.1f”）；
////////////////////////////////////////////////////////////
/////////////////////////SVG//////////////////////////////
////////////////////////////////////////////////////////////
常量SVG=d3。选择（“缩放”）
.append（“svg”）
.attr（“宽度”，宽度+边距。左侧+边距。右侧）
.attr（“高度”，高度+边距。顶部+边距。底部）；
常量G=SVG.append（“G”）
.attr（“转换”、“平移”（+MARGIN.LEFT+）、“+MARGIN.TOP+”）；
常量RECT=G.append（“RECT”）
.attr（“x”，0）
.attr（“y”，高度/2-（矩形高度/2））
.attr（“宽度”，宽度）
.attr（“高度”，矩形高度）；
//画三角形符号
设三角形=d3.symbol（）.type（d3.symbolTriangle）.size（300）；
常量三角形=G.append（“路径”）
.attr（“d”，三角形）
.attr（“转换”、“平移”（“+0+”，“+（高度/2+40）+”）；
//pH文本元素
常量文本=G.append（“文本”）
.attr（“id”、“pH”）
.文本（格式（值））
const textWidth=TEXT.node（）.getBoundingClientRect（）.width
attr（“transform”，`translate（${-textWidth/2}，${（height/2+75）}）`）；
////////////////////////////////////////////////////////////
////////////////////////鳞片/////////////////////////////
////////////////////////////////////////////////////////////
常量比例=d3.scaleLinear（）
.domain（[0，宽度]）
.范围（领域）；
////////////////////////////////////////////////////////////
/////////////////////事件处理程序////////////////////////
//////////////////////////////////////////////////////////// 
“鼠标移动”（事件）=>{
设坐标=d3.指针（事件）；
const textWidth=TEXT.node（）.getBoundingClientRect（）.width
attr（“transform”、“translate”（“+坐标[0]+”，“+（高度/2+40）+”）；
attr（“transform”，`translate（${-textWidth/2+坐标[0]}，${（height/2+75）}）`）；
TEXT.TEXT（格式（比例（坐标[0]））；
});
非常感谢您的帮助！我学到了两个新东西：1）getBoundingClientRect 2）模板字符串。非常方便！
const textWidth = TEXT.node().getBoundingClientRect().width
TEXT.attr("transform", `translate(${-textWidth/2}, ${(height / 2 + 75)})`);