Creating tooltip popups on Edges (created with setEdge)

[Arian Hojat]

Hey all,

Thought maybe someone could help with a question I asked yesterday on stackoverflow...

https://stackoverflow.com/questions/55973593/how-to-create-a-decision-tree-flow-chart-in-d3-dagre-d3-javascript

So I actually got something pretty close to what I wanted:

http://jsfiddle.net/armyofda12mnkeys/4gv90qhx/37/

I like the way the tooltips are set on Nodes, via that smart-loop:

inner.selectAll('g.node')
  .attr("data-hovertext", function(v) { 
        return g.node(v).hovertext
    })
    .on("mouseover", function(){return tooltip.style("visibility", "visible");})
    .on("mousemove", function(){ 
    tooltip.text( this.dataset.hovertext)   
        .style("top", (event.pageY-10)+"px")
        .style("left",(event.pageX+10)+"px");
  })
    .on("mouseout", function(){return tooltip.style("visibility", "hidden");});

But for the edges I didn't see a nice way to loop over edges to add that kind of event, so I hardcode the events and tooltips like so when setting up the edge, vs using the 'hovertext' attribute like above:

// Set up the edges
g.setEdge("QS1", "QS2", { label: "<u onmouseover='(function(){ return $(\"#tooltip_template\").css(\"visibility\", \"visible\"); })()' onmouseout='(function(){ return $(\"#tooltip_template\").css(\"visibility\", \"hidden\"); })()' onmousemove='(function(){ $(\"#tooltip_template\").html(\"AAA&amp;gt;BBB\").css(\"top\", (event.pageY-10)+\"px\").css(\"left\",(event.pageX+10)+\"px\"); })()'>Rule1</u>", hovertext:"A>B", labelType: "html" });
g.setEdge("QS1", "QS3", { label: "<u onmouseover='(function(){ return $(\"#tooltip_template\").css(\"visibility\", \"visible\"); })()' onmouseout='(function(){ return $(\"#tooltip_template\").css(\"visibility\", \"hidden\"); })()' onmousemove='(function(){ $(\"#tooltip_template\").html(\"AAA&amp;lt;BBB\").css(\"top\", (event.pageY-10)+\"px\").css(\"left\",(event.pageX+10)+\"px\"); })()'>Rule2</u>", hovertext:"A<B", labelType: "html" });
g.setEdge("QS1", "QS4", { label: "<u onmouseover='(function(){ return $(\"#tooltip_template\").css(\"visibility\", \"visible\"); })()' onmouseout='(function(){ return $(\"#tooltip_template\").css(\"visibility\", \"hidden\"); })()' onmousemove='(function(){ $(\"#tooltip_template\").html(\"AAA==BBB\").css(\"top\", (event.pageY-10)+\"px\").css(\"left\",(event.pageX+10)+\"px\"); })()'>Rule3</u>", hovertext:"A==B", labelType: "html" });

Anyone have a nicer way to do this?


Also more of a nice-to-have/cherry-on-top extra... a way to figure out a way to get some sort of 'force' applied on each node (nothing fancy, just have it move back to where it belongs if you click on a node to move it).
This is a pretty good example of that: http://bl.ocks.org/GerHobbelt/3669455
But the code looks a bit different for setting up the nodes+links/edges than my code, so couldn't figure out how to apply to my jsfiddle. Anyone have any insight on what I'd have to do to get that working for my fiddle?

Thanks in advance!,
Ari