pass arguments to a d3 on "click" event callback

Question

Here is my code:

function toggleClass(element, className){
  d3.select(element).classed(className, !d3.select(element).classed(className));
}

d3.selectAll("rect").on("click", toggleClass(this, "clicked");

I cannot get it to work, it appears that passing arguments to a DOM event is bad news bears. Does anyone know a work-around for this?

Thank you

Answer 1

This works:

function toggleClass(element, className){
  d3.select(element).classed(className, !d3.select(element).classed(className));
}

d3.selectAll("rect").on("click", function () {
  toggleClass(this, "clicked");
});

here is the working fiddle: http://jsfiddle.net/g45Ju/

thanks to jshanley

Answer 2

Have you tried selection.datum() function? This snippet might give you an idea :

d3
 .select('svg')
 .append('circle')
 .datum({
    'x':10,
    'y':100,
    'z':100
  })
 .on('click'),function(d){
     //Here d = {'x':10,'y':100,'z':1000}
  });