d3.js Links between nodes not rendering as lines

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?

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");