Nie można uzyskać zdarzenia kliknięcia w bibliotece JavaScript D3

Question

Używam biblioteki JavaScript D3, aby wyświetlić dane jako marker skierowany na siłę. To działa dobrze. Nie mogę jednak dodać wydarzenia kliknięcia do kręgu. więc po kliknięciu na okrąg otrzymuję szczegółową analizę okręgu i wyświetlam go w polu modalnym.

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

Próbowałem dodanie .on("click", 'alert(\'Hello world\')') do var circle. To nie działa zgodnie z oczekiwaniami. Ostrzega zamiast obciążenia o kliknięciu.

Doceniam jakiejkolwiek pomocy

Answer 1

Spróbuj tego:

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

Wypróbuj to, jeśli chcesz węzeł zawarty wewnątrz okręgu (powiedzmy, że węzły są mapowanie obiekt z klucza o nazwie gniewu a wartość 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); 

Lub spróbuj tego dla atrybutów SVG (coraz promień SVG, na przykład):

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

Przepraszam, jeśli mój wpis jest taki jak powyżej, ale pomyślałem, że wyjaśnienie może być przydatne.