CODEWITHSUNDEEP
javascriptd3.jsdagre-d3
gugguson
gugguson

Reputation: 819

Clicking on node in dagre-d3

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 ...

Upvotes: 2

Views: 3077

Answers (1)

Rakesh A
Rakesh A

Reputation: 229

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

Upvotes: 1

Related Questions