jquery click function on a d3.js node - php

Question

I want to use jQuery to handle a mouse click on nodes in a force directed network graph. That way, I can run AJAX calls to a PHP page that extracts data about that node via a mySQL query.
But I am struggling how to integrate d3.js with jQuery. I tried this (see jQuery after //click event), but not surprisingly it does not work because 'node' is clearly not the correct ID. When I use HTML div tags, its easy, but with d3.js I am not sure the equivalent ID to use.
Thanks, Tom
<script type="text/javascript">
//click event
$("node").click(function(){
alert("The node was clicked.");
});
//Set margins and sizes
var margin = {
top: 20,
bottom: 50,
right: 30,
left: 50
};
var width = 1920 - margin.left - margin.right;
var height = 1080 - margin.top - margin.bottom;
//Load Color Scale
var c10 = d3.scale.category10();
//Create an SVG element and append it to the DOM
var svgElement = d3.select("body")
.append("svg").attr({"width": width+margin.left+margin.right, "height": height+margin.top+margin.bottom})
.append("g")
.attr("transform","translate("+margin.left+","+margin.top+")");
//Load External Data
d3.json("php/index_network_methy.php", function(dataset){
//Extract data from dataset
var nodes = dataset.nodes,
links = dataset.links;
//Create Force Layout
var force = d3.layout.force()
.size([width, height])
.nodes(nodes)
.links(links)
.gravity(0.1)
.charge(-200)
.linkDistance(100);
//Add links to SVG
var link = svgElement.selectAll(".link")
.data(links)
.enter()
.append("line")
.attr("stroke-width", function(d){ return d.weight/1; })
.attr("class", "link");
//Add nodes to SVG
var node = svgElement.selectAll(".node")
.data(nodes)
.enter()
.append("g")
.attr("class", "node")
.call(force.drag);
//Add labels to each node
var label = node.append("text")
.attr("dx", 24)
.attr("dy", "0.35em")
.attr("font-size", function(d){ return d.influence*1.5>9? d.influence*1.5: 9; })
.text(function(d){ return d.character; });
//Add circles to each node
var circle = node.append("circle")
.attr("r", function(d){ return d.influence/2>15 ? d.influence/2 : 15; })
.attr("fill", function(d){ return c10(d.zone*10); });
//This function will be executed for every tick of force layout
force.on("tick", function(){
//Set X and Y of node
node.attr("r", function(d){ return d.influence; })
.attr("cx", function(d){ return d.x; })
.attr("cy", function(d){ return d.y; });
//Set X, Y of link
link.attr("x1", function(d){ return d.source.x; })
link.attr("y1", function(d){ return d.source.y; })
link.attr("x2", function(d){ return d.target.x; })
link.attr("y2", function(d){ return d.target.y; });
//Shift node a little
node.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
});
//Start the force layout calculation
force.start();
});
</script>

Answer 1

Your listener declaration $("node").click does not reference any element
node is not an element.
You have elements with class node so your jquery declaration should perhaps be
$('.node').click... // (note the dot)
If that doesn't work, it's likely because you're attaching the listener before the elements are in the dom.
A good approach for d3 is to add the a regular javascript listener when you append the node. See d3 handling events