d3 element click events not working

gistfile1.md

The Problem

You're using the d3 library, and you do something like the following:

.enter()
.append "rect"
.attr "fill", "none"
.attr "stroke", "black"
... # other stuff
.on "click", -> alert "whatsApp sucks"

And you navigate over to your rectangle in your browser, click it, and nothing happens.

Why?!

If you fill none on a svg element, all clicks (and mouseovers, mouseouts, etc.) will fall through it. This is one of those things that's obvious if you know it, but otherwise is a cause for much butt-hurt if you didn't.

The Fix

Change the fill:

.attr "fill", "white"

That's it, now your clicks will work