D3 Force Directed JSON Adjacency List

Question

I have a Graph Adjacency List, like so:

{
  nodes: [
  {
    "id": 1,
    "label": "Mark
  },...],

  edges: [
  {
    "source": 1,
    "target": 2
  },....]
}

The edges use the id from the node!

I've been using PHP to echo this list onto client side.

D3 cannot load my JSON from file. So I try to parse it manually:

var width = window.innerWidth,
      height = window.innerHeight;

  var color = d3.scale.category20();

  var force = d3.layout.force()
      .linkDistance(40)
      .linkStrength(2)
      .charge(-120)
      .size([width, height]);

  var svg = d3.select("body").append("svg")
      .attr("width", width)
      .attr("height", height);

  var nodes = [], links = [];

  d3.json( null, function( error )
  {
    JSONData.nodes.forEach( function(node)
    {
      nodes.push( node );
    });

    JSONData.edges.forEach( function(edge)
    {
      links.push({source: edge.source, target: edge.target});
    });

    force.nodes(nodes)
     .links(links)
     .start();

    var link = svg.selectAll(".link")
          .data(links)
          .enter().append("path")
          .attr("fill", "none")
          .attr("class", "link");

    var node = svg.selectAll(".node")
          .data(nodes)
          .enter().append("circle")
          .attr("class", "node")
          .attr("r", 5)
          .style("fill", "#4682B4" )
          .call(force.drag);

    node.append("title").text(function(d) { return d.label; });

    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 d.x; })
      .attr("cy", function(d) { return d.y; });
    });
  });

However, all I can see is the nodes, but not the edges. I have added a CSS file with:

.node {
  stroke: #4682B4;
  stroke-width: 1.5px;
}

.link {
  stroke: #ddd;
  stroke-width: 1.5px;
}

But to no avail. Is there some way around this?

Answer 1

You need to use:

      .enter().append("line")

instead of

      .enter().append("path")

(maybe also you need to change some other attributes so that they correspond to a line, not a path).

Alternatively, you can draw some more complex paths instead of straight lines, but I think it would be an overkill in your case.

EDIT:

I just found two related and interesting questions:

enter link description here - describes another kind of problems while displaying links in a force layout - make sure you don't hit a similar obstacle

enter link description here - a guy trying to draw curvbes instead of lines, if you decide to do something similar

But hope that this answer and hints in the comments are sufficient for you to get what you want.