#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>")
Комментарии:
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>