dagre-d3 how to click node and run an event after that

Question

I am using dagre-d3.js to create hierarchical graph. Now I have a requirement to make the node clickable and perform a function. I am unable to achieve that.

current some of my code looks like

var g = new dagreD3.graphlib.Graph().setGraph({});
g.setNode("TEST", { label: "TEST"})
g.setNode("TEST1", { label: "TEST1"})

g.setEdge("TEST", "TEST1", { label: "open", style: "stroke: green; stroke-width: 2px;fill: none", arrowheadStyle: "fill: green" });

var svg = d3.select("svg"),
inner = svg.select("g");

var render = new dagreD3.render();
render(inner, g);
var initialScale = 0.75;
zoom
.translate([(svg.attr("width") - g.graph().width * initialScale) / 2, 20])
.scale(initialScale)
.event(svg);
svg.attr('height', g.graph().height * initialScale + 40);

I just need to be able to click on TEST or TEST1 and run a function that I wrote to go to that div with same name on page(TEST, TEST1)

I have looked through this, but it doesn't help me. https://github.com/cpettitt/dagre-d3/issues/13 Also this seems to use different method which is not available to me.

Please guide me

Thanks, Nihir

Answer 1

Here are 4 mouse events:

d3.selectAll('svg g.comp')
  .on('mouseover', function(d) {
    console.log('mouseover');
  })
  .on('mouseout', function(d) {
    console.log('mouseout');
  })
  .on('mousedown', function(d) {
    console.log('mousedown');
  })
  .on('mouseup', function(d) {
    console.log('mouseup');
  });

Answer 2

This sounds like an interesting approach.

But there were some inbuilt method available to which I just figured out

here is my solution

var selections = inner.selectAll("g.node");
        selections
          .on('click', function (d) { ScrollToID(d); });

Answer 3

You can use jquery to select the node tag on click, then parse out the node name and pass it into your function. Something like this:

$(document).ready(function() {
  $('.node').click(function() {

    // This gets the node name from the 'class' attribute
    var class_header = $(this).attr('class').split(' ');
    var node_name = class_header[class_header.length - 1]

    // Execute your function
    myFunction(node_name)

  })
})