StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POUnable to get click event in D3 JavaScript library
text
Body
copied!<p>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, I get detailed analysis of the circle and display it in a modal box.</p> <pre class="lang-js prettyprint-override"><code>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 + ")"; }); } </code></pre> <p>I tried adding <code>.on("click", 'alert(\'Hello world\')')</code> to <code>var circle</code>. It does not work as expected. It alerts on load instead on click.</p> <p>I appreciate any help </p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload