Unable to get click event in D3 JavaScript library

Question

I am using D3 JavaScript library to display data as a force directed marker. It works fine. But I am unable to add click event to the circle. so when I click on the circle,

Answer 1

Try out this, if you want the node contained within the circle (let's say that your nodes are mapping an object with a key called anger and a value 34:

var circle = svg.append("svg:g").selectAll("circle")
.data(force.nodes())
.enter().append("svg:circle")
.attr("r", 6)
.on("click", function(d,i) { alert(d.anger); }) // this will alert 34
.call(force.drag);

Or try this for the attributes of the svg (getting the radius of the svg, for example):

var circle = svg.append("svg:g").selectAll("circle")
.data(force.nodes())
.enter().append("svg:circle")
.attr("r", 6)
.on("click", function(d,i) { alert(d3.select(this).r; }) // this will print out the radius })
.call(force.drag);

Sorry if my post is like the one above, but I thought the clarification could be useful.

Answer 2

Try this:

var circle = svg.append("svg:g").selectAll("circle")
  .data(force.nodes())
  .enter().append("svg:circle")
  .attr("r", 6)
  .on("click", function(d,i) { alert("Hello world"); })
  .call(force.drag);