Having trouble with force layout and click event

[David Glaubman]

Summary

I am using d3 and force layout to build (and then 'run') a rooted directed acyclic graph in the content area.

This works great, except that I don't seem to be able to get click events on buttons (or anchors) I later add to a sidebar.

(I have an inkling it may be related to an interaction between click handling and the drag support on the content area nodes, but I am in deep waters here.)

Any help appreciated.  Can provide more details/code if needed.

thanks

David

dglaubman at acm something org

Detail

Initially, there are a set of nodes, each with a nose and a tail, and an empty set of links.

On clicking a node's nose or tail, the node is 'fixed' but can still be dragged.

A link is generated from A.nose to B.tail by clicking/touching these in succession.

Once the graph is as desired, unconnected nodes are removed, while the connected nodes are hooked up to a click handler.

The force layout is stopped, and there are no more explicit calls to the layout from this point on.  

In fact, there is no real need for drag support after this -- I just keep it on since I dont know how to turn it off.

On clicking a node, a signal is generated, and some time later, a dataReady handler is triggered (on receipt of an external event).

The dataReady handler updates a particular node, and pushes the event description to an array which is joined to a set of buttons in a sidebar.

(note: the sidebar was never under control of the layout).

Everything works except I can't seem to make the buttons clickable.  

Here is the part where I push the event and join with the buttons:

constructor: 

                                  ... 

    @signalData = []
    @replay = d3.select("#signalLog") 

dataReady: (signal, msg) ->
    @signalData.push { signal: signal, msg: msg }
    @replay
        .selectAll( "button.signal")
        .data( @signalData )
              .enter()
        .insert( "button" )
.on( "click", (d,i) -> alert( "hi, I want to do something here" ) ) 
        .attr( "class", "signal" )
        .text( (d,i) -> "#{d.signal}: #{d.msg.payload.src}" )

                                     ... 

[David Glaubman]

I've posted code showing the problem (or, perhaps, my pilot error) at  http://bl.ocks.org/2231560

I'm pretty new to the whole ecosystem (not just d3, but also js, HTML5, coffee-script, git) and would truly appreciate if anyone can shed some light.

thanks much

David

[Mike Bostock]

As best I can tell, your button is obstructed by the SVG element. Even
though the background of the SVG is transparent, it is preventing
clicks (and mouseover) from reaching the button. You need to position
the button on top of the SVG element to prevent this. I was able to
fix it in the JavaScript console by setting the button to be position:
absolute and deleting the anchor element above it.

Mike

[David Glaubman]

Thanks! And, adding my voice to the choir, congrats on creating perhaps the most amazing and delightful library I've encountered.

David