No se puede obtener el evento click en la biblioteca JavaScript D3

Question

Estoy usando la biblioteca JavaScript D3 para mostrar los datos como un marcador dirigido forzado. Funciona bien. Pero no puedo agregar el evento click al círculo. así que cuando hago clic en el círculo, obtengo un análisis detallado del círculo y lo visualizo en un cuadro modal.

var links = [{source: "x", target:"y", type: "paid"},......]'; 

var nodes = {}; 

// Compute the distinct nodes from the links. 
links.forEach(function(link) { 
    link.source = nodes[link.source] || (nodes[link.source] = {name: link.source}); 
    link.target = nodes[link.target] || (nodes[link.target] = {name: link.target}); 
}); 

var w = 950, 
    h = 500; 

var force = d3.layout.force() 
    .nodes(d3.values(nodes)) 
    .links(links) 
    .size([w, h]) 
    .linkDistance(60) 
    .charge(-300) 
    .on("tick", tick) 
    .start(); 

var svg = d3.select("#graph").append("svg:svg") 
    .attr("width", w) 
    .attr("height", h); 

// Per-type markers, as they don't inherit styles. 
svg.append("svg:defs").selectAll("marker") 
    .data(["suit", "licensing", "resolved"]) 
    .enter().append("svg:marker") 
    .attr("id", String) 
    .attr("viewBox", "0 -5 10 10") 
    .attr("refX", 15) 
    .attr("refY", -1.5) 
    .attr("markerWidth", 6) 
    .attr("markerHeight", 6) 
    .attr("orient", "auto") 
    .append("svg:path") 
    .attr("d", "M0,-5L10,0L0,5"); 

var path = svg.append("svg:g").selectAll("path") 
    .data(force.links()) 
    .enter().append("svg:path") 
    .attr("class", function(d) { return "link " + d.type; }) 
    .attr("marker-end", function(d) { return "url(#" + d.type + ")"; }); 

var circle = svg.append("svg:g").selectAll("circle") 
    .data(force.nodes()) 
    .enter().append("svg:circle") 
    .attr("r", 6) 
    .call(force.drag); 

var text = svg.append("svg:g").selectAll("g") 
    .data(force.nodes()) 
    .enter().append("svg:g"); 

// A copy of the text with a thick white stroke for legibility. 
text.append("svg:text") 
    .attr("x", 8) 
    .attr("y", ".31em") 
    .attr("class", "shadow") 
    .text(function(d) { return d.name; }); 

text.append("svg:text") 
    .attr("x", 8) 
    .attr("y", ".31em") 
    .text(function(d) { return d.name; }); 

// Use elliptical arc path segments to doubly-encode directionality. 
function tick() { 
    path.attr("d", function(d) { 
    var dx = d.target.x - d.source.x, 
     dy = d.target.y - d.source.y, 
     dr = Math.sqrt(dx * dx + dy * dy); 
    return "M" + d.source.x + "," + d.source.y + "A" + dr + "," + dr + " 0 0,1 " + d.target.x + "," + d.target.y; 
    }); 

    circle.attr("transform", function(d) { 
    return "translate(" + d.x + "," + d.y + ")"; 
    }); 

    text.attr("transform", function(d) { 
    return "translate(" + d.x + "," + d.y + ")"; 
    }); 
} 

He intentado añadir .on("click", 'alert(\'Hello world\')')-var circle. No funciona como se esperaba Alerta sobre carga en lugar de hacer clic.

Agradezco cualquier ayuda

Answer 1

Prueba esto:

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); 

Answer 2

probar esto, si desea que el nodo del interior del círculo (digamos que los nodos están trazando un objeto con una clave llamada rabia y un valor de 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); 

O probar esto por los atributos de la SVG (obtener el radio de la SVG, por ejemplo):

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); 

Disculpa si mi publicación es como la de arriba, pero pensé que la aclaración podría ser útil.