确定段落的高度

Question

我创建了表格行标题，如下所示。我想在这 4 个标题中创建一个矩形 svg 框。我无法确定段落高度，因此无法创建完全适合段落的框。这是我的代码

let svg = d3.select("body").append("svg").attr("width", 1000).attr("height", 1000);

let text=[

"Who will win the election. Trump or Biden?",

"Data Analysis",

"Javascript",

"Compare Performance of S&P 500 Index against other Indices"  

]

svg.selectAll("boxestext")

    .data([0,100,200,300])

    .enter()

    .append("foreignObject")

    .attr("width", (d, i) => 100 )

    .attr("height", 200)

    .attr("x",(d, i) => d)

    .attr("y",0)

    .attr("class", "boxes")

    .append("xhtml:body")

    .style("font", 50)

    .html((d,i)=>"<p>"+text[i]+"</p>") 

https://codepen.io/zubair57/pen/MWeXPqX

Answer 1

let svg = d3.select("body").append("svg").attr("width", 1000).attr("height", 1000);let text=["Who will win the election. Trump or Biden?","Data Analysis","Javascript","Compare Performance of S&P 500 Index against other Indices"&nbsp;&nbsp;]let texty=svg.selectAll("boxestext")&nbsp; &nbsp; .data([0,100,200,300])&nbsp; &nbsp; .enter()&nbsp; &nbsp; .append("foreignObject")&nbsp;&nbsp;&nbsp; &nbsp; .attr("width", (d, i) => 100 )&nbsp; &nbsp; .attr("height", 200)&nbsp; &nbsp; .attr("x",(d, i) => d)&nbsp; &nbsp; .attr("y",0)&nbsp; &nbsp; .attr("class", "boxes")&nbsp; &nbsp; .append("xhtml:body")&nbsp; &nbsp; .attr("class","mytext").attr("id",(d,i)=>"mytext"+i)&nbsp; &nbsp; .style("font", 50)&nbsp; &nbsp; .html((d,i)=>"<p>"+text[i]+"</p>")&nbsp;let rect = d3.selectAll("p").node().getBoundingClientRect()console.log(rect.height)///p {text-align: left;}.boxes p{&nbsp; border:1px solid;}&nbsp;<script src="https://d3js.org/d3.v5.min.js"></script>