Question

Is there a 'mouseover' functionality for phylotree.js?

0

Entering edit mode

4.6 years ago

lubw06 ▴ 10

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.1k views

ADD COMMENT • link 4.6 years ago by lubw06 ▴ 10

0

Entering edit mode

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 REPLY • link 4.6 years ago by Jean-Karim Heriche 27k

0

Entering edit mode

4.6 years ago

juanjo75es ▴ 130

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 COMMENT • link 4.6 years ago by juanjo75es ▴ 130

score 2 · Accepted Answer · 2019-09-10

2

Entering edit mode

4.6 years ago

lubw06 ▴ 10

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 COMMENT • link 4.6 years ago by lubw06 ▴ 10