Clicking on node in dagre-d3

Question

I'm using degre-d3 and I'm having problems getting the node data for the clicked node. I have a event when clicked but the d3.select(this) doesn't seem to get me relevant data (I would like to have the node name, label and additional object data if possible.

app.controller "DashboardElementShowController", ($scope, DashboardElementIndexService) ->
  init_app = ->
    # Create a new directed graph
    g = new dagreD3.Digraph()

    g.addNode "bpitt",
      label: "html Brad Pitt <b>test</b>"
    g.addNode "hford",
      label: "Harrison Ford"
    g.addNode "lwilson",
      label: "Luke Wilson"
    g.addNode "kbacon",
      label: "Kevin Bacon"

    g.addEdge null, "bpitt", "kbacon",
    g.addEdge null, "hford", "lwilson",
    g.addEdge null, "lwilson", "kbacon",

    renderer = new dagreD3.Renderer().edgeInterpolate("cardinal")
                .edgeTension(0.8)
    renderer.edgeInterpolate('linear');
    renderer.run g, d3.select("svg g")
    d3.select("svg g").on("click", (d, i, k) ->
      console.log d3.select(this) # doesn't seem to have relevant info I need
    )


  init_app()

Edit: 10.09.2014: Here it says I have to override renderer.drawNodes method: https://github.com/cpettitt/dagre-d3/issues/67

This is the code specified:

constructor:
  @renderer.drawNodes @_drawNodes().bind @

_drawNodes: ->
  oldDrawNodes = @renderer.drawNodes()
  (graph, svg) ->
    # catch drawed nodes
    svgNodes = oldDrawNodes graph, svg
    svgNodes.on 'click', (nodeId) -> console.log 'node clicked', nodeId

I'm not sure how and where I should override with this code ...

score 1 · Accepted Answer · answered Sep 17 '14 at 10:42

1

This example from their Wiki might help http://cpettitt.github.io/project/dagre-d3/latest/demo/hover.html

answered Sep 17 '14 at 10:42

iamrakesh

219
4
16

4

The difference is that there the callback is run to produce titletext for ALL nodes immediately at render time, whereas OP wants to have access to the data for the clicked node at click time. – Crashthatch Nov 11 '14 at 15:16
The demo is currently not working, as it fetches the D3JS script by HTTP, not HTTS (strange that the )other demos work. I have informed the author. You can still Ctr-U or F12 to study the code, or copy it to `localhost` and edit to fetch D3JS by HTTP to see it in action. – Mawg says reinstate Monica Jan 23 '21 at 11:39

Clicking on node in dagre-d3

1 Answers1