Question

我正在研究使用动态生成的图形的一些代码。并且所有这些图都在y轴上有图例。现在我的目标是检查最长的图例字符串有多长，如果最长的字符串大于20个字符，我只想显示每个字符串的第一个字符。

通过下面的代码，我实现了我可以提醒所需缩短的字符串;但我不知道如何使用这些新字符串更改文本。

var textLengthArray = [];
var labelStrings = domContainer.find(" g > .brm-y-direction > .tick > text");

labelStrings.each(function() {
    textLengthArray.push($(this).text());
});

var longestString = textLengthArray.sort(function(a, b) {
    return b.length - a.length;
})[0];

if (longestString.length >= 20) {
    $("g.tick text").css("font-size", "9pt");
    var offsetLeft = longestString.length * 3.7;

    textLengthArray.map(function(sub) {
        var subString = sub.substring(0, 6);
        alert(subString);
    });
};

我尝试过类似的事情：

$(labelStrings).replaceWith(subString)

有了这个，我根本没有传说，因为我用新字符串替换了整个文本标签及其所有属性。

那么有没有办法不触及标签及其值，只需更改开始和结束标签之间的文字？

提前致谢！

Answer 1

这是您在访问SO之前应该研究Google的基础知识，无论如何您可以使用$(labelStrings).html(subString)或$(labelStrings).text(subString) - 它们都只会更改标记之间的内部内容

Answer 2

sth. like this?

var $nodes = domContainer.find(" g > .brm-y-direction > .tick > text");

var longestLength = 0;
$nodes.each(function(){
    longestLength = Math.max(longestLength, $(this).text().length);
});

if(longestLength >= 20){
    $("g.tick text").css("font-size", "9pt");
    var offsetLeft = longestLength * 3.7;

    $nodes.each(function(){
        var $this = $(this);
        var text = $this.text();
        var substr = text.substr(0, 6);

        console.log(substr);

        $this.text(substr);
    });
}

替换动态生成的文本元素

2 个答案: