I created a simple power chart using d3: http://goo.gl/afHTD
Why the edges of the graph are not displayed? Here is my entire HTML file. You can also see this and work with it, of course, by looking at the original page. It is based on an example from the d3 site.
<!DOCTYPE html> <html> <head> <title>Force-Directed Layout</title> <script type="text/javascript" src="d3.v2.js"></script> <style type="text/css"> div.node { border-radius: 6px; width: 12px; height: 12px; margin: -6px 0 0 -6px; position: absolute; } div.link { position: absolute; border-bottom: solid #999 1px; height: 0; -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0; } </style> </head> <body> <div id="chart"></div> <script type="text/javascript"> var width = 960, height = 500; var color = d3.scale.category20(); var force = d3.layout.force() .charge(-120) .linkDistance(30) .size([width, height]); var svg = d3.select("#chart").append("svg") .attr("width", width) .attr("height", height); d3.json("newJson.json", function(json) { force .nodes(json.nodes) .links(json.links) .start(); var link = svg.selectAll("line.link") .data(json.links) .enter().append("line") .attr("class", "link") .style("stroke-width", function(d) { return Math.sqrt(d.value); }); var node = svg.selectAll("circle.node") .data(json.nodes) .enter().append("circle") .attr("class", "node") .attr("r", 5) .style("fill", function(d) { return color(d.group); }) .call(force.drag); node.append("title") .text(function(d) { return d.name; }); 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; }); node.attr("cx", function(d) { return dx; }) .attr("cy", function(d) { return dy; }); }); }); </script> </body> </html>
Should var link... display edges? My JSON file is also quite simple:
{"nodes": [{"name":"Myriel","group":1}, {"name":"Napoleon","group":1}, {"name":"Napoleon","group":2}], "links": [{"source":1,"target":0,"value":1}, {"source":1,"target":0,"value":1}, {"source":1, "target":2, "value":1}]}