Question: Is there a 'mouseover' functionality for phylotree.js?
gravatar for lubw06
10 months ago by
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:

Phylotree.js GitHub repo is here:

Thank you very much.

d3.js phylotree.js • 245 views
ADD COMMENTlink modified 10 months ago • written 10 months 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 10 months ago by Jean-Karim Heriche22k
gravatar for lubw06
10 months ago by
lubw0610 wrote:

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

ADD COMMENTlink written 10 months ago by lubw0610
gravatar for juanjo75es
10 months ago by
juanjo75es70 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.

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

<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>
ADD COMMENTlink written 10 months ago by juanjo75es70
Please log in to add an answer.


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