hover effects with dagre / dagre-d3 / d3.js

1k views Asked by At

this is my first post, hopefully someone could help me out on this one...

the content you can see in the jsfiddle example is made with a tool i am working with. All the definitions of nodes and edges (links) are generated by our tool ("VAR STATES = .." and "g.setEdge", etc..) (the tooltips are not working here, just ignore)

in the selection "allnodes" (on mouseover) i just could select the current node (d3.select(this), but not the objects known as names in SELECTIT)

what i want to achieve:

1.) a "mouseover" effect like here: http://cs.brown.edu/people/jcmace/d3/graph.html?id=small.json

I could select the affect node names in the "mouseover" method:

    var selectit = g.neighbors(d); 

-> API documentation of dagrejs/graphlib found here: https://github.com/dagrejs/graphlib/wiki/API-Reference

2.) a "mouseover" effect when selecting a link (including parent and children node)

the jsfiddle: https://jsfiddle.net/kraab/n9mgo74j/32/

Thanks in advance!

1

There are 1 answers

2
Klaus Raab On

i found a solution myself, jsfiddle updated. with the .each method you can iterate through all the selected elements, if the actual element d is found in the Array of neighbours selectit you know that you are now on the correct object and with d3.select(this) you can change the actual object. The actual object you hover on is saved to elemtosearch and needs too be changed too...

https://jsfiddle.net/n9mgo74j/37/