d3.js Links between nodes not rendering as lines

Question

I am using a modified balloon graph and having issues with getting the links between the nodes to render. I am using JustinVDM's custom balloon graph (https://gist.github.com/justinvdm/3676778)

The data being used is the stock Bostock flare.json data: http://bl.ocks.org/mbostock/4063530.

If I include the "error" option in d3.json("flare.json", function(error, root) {..., it will error. Without it, at least the nodes appear. Is the data for the source and target even being identified?

If it is, the attempt below is trying to call the coordinates of the parent source and target child and draw a line between them, but I don't know if this approach is proper. Should I instead be using d3.svg.diagonal?

This is the graph as it appears:

var margin = {top: 20, right: 20, bottom: 20, left: 20},
    width =1500, 
    height = 1500, 
    diameter = Math.min(width, height),
    radius = diameter / 2;


var balloon = d3.layout.balloon()
  .size([width, height])
  .gap(50)                                      

var line = d3.svg.line()

var svg = d3.select("body").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform", "translate(" + (margin.left + radius) + "," + (margin.top + radius) + ")")

    root = "flare.json";
    root.y0 = height / 2;
    root.x0 = width / 2;

d3.json("flare.json", function(root) {
  var nodes = balloon.nodes(root),
      links = balloon.links(nodes);

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

  var node = svg.selectAll("g.node")
    .data(nodes)
    .enter()
    .append("g")
    .attr("class", "node");

  node.append("circle")
      .attr("r", function(d) { return d.r; })
      .attr("cx", function(d) { return d.x; })
      .attr("cy", function(d) { return d.y; });

  node.append("text")
      .attr("dx", function(d) { return d.x })
      .attr("dy", function(d) { return d.y })
      .attr("font-size", "5px")
      .attr("fill", "white")
      .style("text-anchor", function(d) { return d.children ? "middle" : "middle"; })
      .text(function(d) { return d.name; })
});

UPDATE: I have added the following code from the API reference about "hierarchy.links":

var link= svg.selectAll("path")
  .data(links)
 .enter()
  .append("path")
  .attr("d", d3.svg.diagonal());

The resulta are a little strange, but if I replace d3.svg.diagonal() with d3.svg.line(), the code breaks.

How do I just make the edges lines and not ribbons?

Answer 1

You make the edges lines by setting the fill to none and using stroke to define the color. Something like this:

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

Answer 2

There are no links between nodes in this layout. The goal is to represent a tree as a graph with nested nodes.

However, if you really want to add links even if they add information only by their color or thickness, then you can always draw lines between circles by giving each circle a different id and then draw the line between the source and the target circles you would from your data.