Блог

Главная - Вопросы по программированию - Определение высоты абзаца

Определение высоты абзаца

#javascript #html #css #d3.js

#javascript #HTML #css — код #d3.js #css

Вопрос:

Я создал заголовки строк таблицы следующим образом. Я хочу создать прямоугольное поле svg для каждого из этих 4 заголовков. Я не могу определить высоту абзаца, поэтому не могу создать поля, которые точно соответствуют абзацу. Вот мой код

 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 Samp;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

Комментарии:

1. Выберите p (каким-то образом, используя d3). Затем .getBoundingClientRect() призовите его. Возвращаемый объект будет иметь height свойство.

Ответ №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 Samp;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>