Impossible d'obtenir l'événement click dans la bibliothèque JavaScript D3

Je suis en utilisant D3 bibliothèque JavaScript pour afficher des données comme une force dirigée marqueur. Il fonctionne très bien. Mais je suis incapable d'ajouter cliquez sur l'événement pour le cercle. alors, quand je clique sur le cercle, je reçois une analyse détaillée du cercle et de l'afficher dans une modal box.

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 + ")";
});
}

J'ai essayé d'ajouter .on("click", 'alert(\'Hello world\')') à var circle. Il ne fonctionne pas comme prévu. Il alerte sur la charge plutôt que sur cliquez sur.

J'apprécie toute l'aide

source d'informationauteur Josh Randall

  1. 19

    Essayez ceci: 

    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);
  2. 3

    Essayer cela, si vous souhaitez que le nœud contenues à l'intérieur du cercle (disons que les nœuds sont de cartographie d'un objet avec une clé appelée la colère et une valeur 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);

    Ou essayez ceci pour les attributs de l'svg (le rayon de la svg, par exemple):

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

    Désolé si mon post est comme ci-dessus, mais je pensais que la clarification pourrait être utile.