dagrejs / dagre-d3

A D3-based renderer for Dagre
MIT License
2.85k stars 587 forks source link

how to click node and run an event after that #144

Open nihirrshah opened 9 years ago

nihirrshah commented 9 years ago

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

ecafe8 commented 8 years ago

svg.selectAll("g.node").on("click", function(id) { var _node = g.node(id); console.log("Clicked " + id,_node); });

ya-s-u commented 8 years ago

:+1: