javascript - hyperlinks in force-directed just won't work -
context : need force-directed graph have labels pointing urls.
i reusing these examples : http://bl.ocks.org/mbostock/4062045 hyperlinks in d3.js objects, part 2
my file :
<!doctype html> <meta charset="utf-8"> <style> .node { stroke: #666; stroke-width: 1.0px; } .link { stroke: #ccc; } .node text { pointer-events: none; font: 12px sans-serif; } </style> <body> <script src="http://d3js.org/d3.v3.min.js"></script> <script> //constants svg var width = 900, height = 600; //set colour scale var color = d3.scale.category20(); //set force layout var force = d3.layout.force() .charge(-100) .linkdistance(100) .size([width, height]); var svg = d3.select("body").append("svg") .attr("width", width) .attr("height", height); // read json file d3.json("collection_url.json", function(error, graph) { force.nodes(graph.nodes) .links(graph.links) .start(); var link = svg.selectall(".link") .data(graph.links) .enter().append("line") .attr("class", "link") .style("stroke-width", function (d) { return math.sqrt(d.value); }); var node = svg.selectall(".node") .data(graph.nodes) .enter().append("g") .attr("class", "node") .call(force.drag); node.append("circle") .attr("r", 10) .style("fill", function (d) { return color(d.group); }) // if it's child, url node.each(function(d){ var thisnode = d3.select(this); if (!d.children) { thisnode.append("a") .attr("xlink:href", function(d) { return d.url; }) .append("text") .attr("dx", 8) .attr("dy", 3) .attr("text-anchor", "start") .text(function(d) { return d.url; }) ; } else { thisnode.append("text") .attr("dx", -8) .attr("dy", 3) .attr("text-anchor", "end") .text(function(d) { return d.name; }); } }); // force force.on("tick", function () { link.attr("x1", function (d) { return d.source.x; }) .attr("y1", function (d) { return d.source.y; }) .attr("x2", function (d) { return d.target.x; }) .attr("y2", function (d) { return d.target.y; }); d3.selectall("circle").attr("cx", function (d) { return d.x; }) .attr("cy", function (d) { return d.y; }); d3.selectall("text").attr("x", function (d) { return d.x; }) .attr("y", function (d) { return d.y; }); }); }); </script> </body> </html> problem :
the json parsed correctly : urls show node names should. but, no hyperlink active.
i going through examples on site, nothing seems work. note need labels clickable hyperlinks, not circles.
can illuminate i'm doing wrong ?
i forked fiddle, , added data first example. fiddle working hyperlinks. issue should remove style pointer-events: none; because stops links working.
Comments
Post a Comment