确定段落的高度

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"  

]

let texty=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")

    .attr("class","mytext")

.attr("id",(d,i)=>"mytext"+i)

    .style("font", 50)

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

let rect = d3.selectAll("p").node().getBoundingClientRect()

console.log(rect.height)///

p {text-align: left;}

.boxes p{

  border:1px solid;

}

 <script src="https://d3js.org/d3.v5.min.js"></script>