Rotating Chromosome Text

lvulliard / BioCircos.R

Htmlwidgets binding R commands to the BioCircos.js library

GNU General Public License v2.0

37 stars 9 forks source link

Rotating Chromosome Text #2

Closed nickjhathaway closed 5 years ago

nickjhathaway commented 5 years ago

So I have a plot with really long chromosome labels but small chromosome length so my labels overlap so I was trying to figure out how to rotate the text to be perpendicular to the plot. I saw with genomeLabelDx= and genomeLabelDy= I could change the positioning but I couldn't find a way to rotate the text and was wondering if there was an option to do so.

Thanks! -Nick

koalive commented 5 years ago

Hi,

This option is not available in the original BioCircos JS library and therefore not offered in this package as well but relatively easy to implement. I'll give it a try when I have time. In the meantime, a quick fix if you're directly working with the SVG is to add a rotation to the transformation applied to the genome labels. Each label is defined by a line looking like that: <text style="fill: rgb(0, 0, 0); font-size: 10pt;" dy="0" transform="rotate(13.171944156123853)translate(0,-210)">1</text> And can be modified as follows: <text style="fill: rgb(0, 0, 0); font-size: 10pt;" dy="0" transform="rotate(13.171944156123853)translate(0,-210)rotate(-90)">1</text>

Cheers.

nickjhathaway commented 5 years ago

Excellent, I was able to make the plot in an RMarkdown and then added the following js script code block to add a button to add whatever rotation, it's a little hacky since there wasn't specific classes or ids for the chromosome text elements but it looks like it works

```{js} $(".main-container").prepend("

<input class=\"btn btn-primary\" type=\"submit\" value=\"Rotate Text\">")

$("#rotateTextForm").submit(function( event ) { var searchTerm = "translate(0,-394)" $(".BioCircos text").each(function(){ if(typeof($(this).attr("transform")) != "undefined" && $(this).attr("transform").includes(searchTerm)){ var oldTransform = $(this).attr("transform").substr(0, $(this).attr("transform").indexOf(searchTerm) +searchTerm.length ) $(this).attr("transform", oldTransform + "rotate(" + $("#rotateTextForm input").val() + ")") } }); event.preventDefault(); }); ```

koalive commented 5 years ago

This is now directly implemented with the genomeLabelOrientation parameter in version v0.3.4.

LouisCaruana commented 4 years ago

Is there a way to have a similar function for links labels? I would like my links labels text on the left-hand side of my BioCircos plots to be rotated 180 degrees so that all text roughly in the correct orientation If that makes sense? Is this possible by creating two separate vectors for the text that falls to the left and right-hand side of my plot and rotating just the text in the left-hand vector?

Thanks!

Nicholas-Bartelo commented 2 years ago

Has @LouisCaruana questions been solved anywhere? I have the same questions now regarding orientation of text in the BioCircosLinkTrack. Thanks!