Currently, I have an array that stores multiple strings based on displayed charts. My objective is to find the longest string within this array. So far, this task has been executed without any issues.
The code snippet for this process is as follows:
var textLengthArray = [];
domContainer.find(" g > .element1 > .element2> text").each(function () {
textLengthArray.push($(this).text());
});
var longestString = textLengthArray.sort(function (a, b) {
return b.length - a.length;
})[0];
Now, I aim to adjust the font size of these "text" elements based on the length of the longest string. If the longest string in the array consists of more than 10 characters, I want to change the font size to "x px/pt".
Initially, my thoughts are focused on implementing something like the following:
if (longestString >= 10){
domContainer.find(" g > .brm-y-direction > .tick > text")
.style('font-size', '4pt');
};
I also attempted another approach:
if (longestString >= 2){
$("g.brm-y-direction.tick").find("text").css("font-size", "4pt");
};
However, none of these solutions seemed to work effectively. Could anyone provide guidance on how to resolve this using JavaScript?
The resulting HTML text is structured as shown below:
<g class="tick" transform="translate(0,74)" style="opacity: 1;">
<line x2="-6" y2="0"></line>
<text dy=".32em" x="-12" y="37" style="text-anchor: end;">sampletext</text></g>