getBBox()和getComputedTextLength()一旦起作用,一次就不起作用 [英] getBBox() and getComputedTextLength() once working, once not
问题描述
我正在使用d3.js + svg + javscript/typescript创建图表.我需要知道文本的长度,才能将其附加在适当的位置.
I am creating charts with d3.js+svg+javscript/typescript. I need to know length of texts to append it in proper places.
我正在使用/正在尝试使用功能getBBox()和getComputedTextLength(),但是... getBBoX仅在我第一次生成图表时(第二次生成图表,然后返回0)工作,而getComputedTextLength( )起作用...只是有时.由此看来,问题出在我尝试读取它的宽度/高度之前可能没有生成svgtext.
I am using/was trying to use functions getBBox() and getComputedTextLength(), but... getBBoX works only when I am generating chart for the first time (for second time and next it returns 0), while getComputedTextLength() works... just sometimes. From that what I read the problem could be that svgtext is not generated before I am trying to read its width/height.
export function ReturnWidthOfText(text1, rotate, fontSize, someSVGGroup , fontName)
{
var tempText;
if (rotate == true)
{
tempText = someSVGGroup.append("svg:text")
.attr("id", "lolo")
.style("font-size", fontSize + "px")
.style("font-family", fontName)
.attr("transform", "rotate(270)")
.text(text1);
}
else
{
tempText = someSVGGroup.append("svg:text")
.attr("id", "lolo")
.style("font-size", fontSize + "px")
.style("font-family", fontName)
.text(text1);
}
var width = tempText.getComputedTextLength();
document.getElementById("lolo").parentNode.removeChild(document.getElementById("lolo"))
return width;
}
export function ReturnSizeOfText(text1, rotate, fontSize, someSVGGroup, fontName) {
//let svgText = document.getElementById("lolo");
var tempText;
if (rotate == "Yes")
{
tempText = someSVGGroup.append("svg:text")
.attr("id", "lolo")
.style("font-size", fontSize + "px")
.style("font-family", fontName)
.attr("transform", "rotate(270)")
.text(text1);
}
else
{
tempText = someSVGGroup.append("svg:text")
.attr("id", "lolo")
.style("font-size", fontSize + "px")
.style("font-family", fontName)
.text(text1);
}
let size;
size = { Width: 0, Height: 0 };
let element: any = document.getElementById("lolo");
let bbox = element.getBBox();
//console.log(text.node().getBBox());
size.Width = bbox.width;
size.Height = bbox.height;
//var width = tempText.getComputedTextLength();
document.getElementById("lolo").parentNode.removeChild(document.getElementById("lolo"))
return size;
}
有人可以建议如何改善这些功能以使其正常工作吗? 在准备"Office应用程序"时,我主要对IE和Edge的解决方案感兴趣.
Could anyone advise how to improve those functions to work properly? As I am preparing "App for Office" I am interested mainly in solution for IE and Edge.
推荐答案
我找到了答案.它返回0,因为仅当svg/html块可见时,它才返回良好结果,而当我尝试重新生成图表时,它被隐藏了.
I've found an answer. It was returning 0s, because it returns good results only when svg/html block is visible, while when I was trying to regenerate chart it was hidden.
这篇关于getBBox()和getComputedTextLength()一旦起作用,一次就不起作用的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!