This is a test version of Biostars. For the public version, visit https://www.biostars.org.
Is there a 'mouseover' functionality for phylotree.js?

Hi All,

I am adopting phylotree.js for the display of a set of compounds with similar chemical structures. Each leaf node will be a compound. I would like to be able to display the chemical structure (and some additional information) for the compound when I mouseover a leaf node. However, I could not locate such functionality. I am wondering whether I should implement this myself or I should request such a feature/functionality to be added to phylotree. If someone can point me to the right direction it would be great.

Please note that phylotree.js is based on d3.js. An example tree display is here: http://phylotree.hyphy.org/

Phylotree.js GitHub repo is here: https://github.com/veg/phylotree.js

Thank you very much.

phylotree.js d3.js
• 1,739 views • link
written by lubw06 • lubw06

Besides writing some javascript, using css may also be a possibility. The relevant classes can be found in this D3 block. Look for the :hover selector. You can use the css content property to display some text or an image.

• 0 views • link
written by Jean-Karim Heriche Jean-Karim Heriche

2 answers

Solved the problem by asking the question to the Phylotree.js developers. See the answer here:

https://github.com/veg/phylotree.js/issues/123

• 0 views • link
written by lubw06 • lubw06

I can't say for sure, but if it helps I can say that I have been using it some weeks ago and my impression is that it's not possible without hacking the code. But if you have some experience in javascript programming I think it might be that it's not too hard to hack. You have to add an event callback globally for the on mouseover event and then you can debug and see if the information in the event let's you identify the element. I guess that would work. Something like that.

<html>
<head>
<script language="JavaScript">
function tagInfo()<!--from   w  w  w . j  av a2s.  c om-->
{
var tag;
tag = window.event.srcElement.tagName;
document.writeln(tag);
}

</script>
</head>
<body onMouseover="tagInfo()">
<h1>Heading One</h1>
<P>Some text</p>
<h2>Another heading</h2>
<P>More text and some <b>bold</b> text</p>
<h3>Another heading</h3>
<P>More text and some <i>italics</i> text</p>
</body>
</html>
• 0 views • link
written by juanjo75es juanjo75es

Log in to answer this question.

More posts like this