Question: Is there a 'mouseover' functionality for phylotree.js?
0
gravatar for lubw06
15 days ago by
lubw0610
lubw0610 wrote:

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.

d3.js phylotree.js • 125 views
ADD COMMENTlink modified 13 days ago • written 15 days ago by lubw0610

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.

ADD REPLYlink written 14 days ago by Jean-Karim Heriche20k
2
gravatar for lubw06
13 days ago by
lubw0610
lubw0610 wrote:

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

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

ADD COMMENTlink written 13 days ago by lubw0610
0
gravatar for juanjo75es
15 days ago by
juanjo75es60
juanjo75es60 wrote:

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>
ADD COMMENTlink written 15 days ago by juanjo75es60
Please log in to add an answer.

Help
Access

Use of this site constitutes acceptance of our User Agreement and Privacy Policy.
Powered by Biostar version 2.3.0
Traffic: 1894 users visited in the last hour