Question

我用d3.js + svg + javscript / typescript创建图表。我需要知道文本的长度才能将其附加到适当的位置。

我正在使用/试图使用函数getBBox（）和getComputedTextLength（），但是... getBBoX仅在我第一次生成图表时（第二次和下一次返回0），而getComputedTextLength（工作......有时候。从那里我读到的问题可能是在我尝试读取宽度/高度之前没有生成svgtext。

    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;


}

有人可以建议如何改善这些功能才能正常工作吗？当我准备“App for Office”时，我主要对IE和Edge的解决方案感兴趣。

Answer 1

我找到了答案。它返回0，因为只有当svg / html块可见时才返回好的结果，而当我试图重新生成图表时它被隐藏了。

getBBox（）和getComputedTextLength（）一旦工作，一次不工作

1 个答案: