title: d3.js Links between nodes not rendering as lines
body: <p>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 (<a href="https://gist.github.com/justinvdm/3676778" rel="nofollow noreferrer">https://gist.github.com/justinvdm/3676778</a>)</p>
  
  <p>The data being used is the stock Bostock flare.json data: <a href="http://bl.ocks.org/mbostock/4063530" rel="nofollow noreferrer">http://bl.ocks.org/mbostock/4063530</a>.</p>
  
  <p>If I include the "error" option in <code>d3.json("flare.json", function(error, root) {...</code>, it will error. Without it, at least the nodes appear. Is the data for the source and target even being identified?</p>
  
  <p>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 <code>d3.svg.diagonal</code>?</p>
  
  <p>This is the graph as it appears:
  <img src="https://i.stack.imgur.com/rDzBF.jpg" alt="No edges"></p>
  
  <pre><code>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; })
  });
  </code></pre>
  
  <p>UPDATE:
  I have added the following code from the API reference about "hierarchy.links":</p>
  
  <pre><code>var link= svg.selectAll("path")
    .data(links)
   .enter()
    .append("path")
    .attr("d", d3.svg.diagonal());
  </code></pre>
  
  <p>The resulta are a little strange, but if I replace <code>d3.svg.diagonal()</code> with <code>d3.svg.line()</code>, the code breaks. </p>
  
  <p><img src="https://i.stack.imgur.com/vb1KM.jpg" alt="enter image description here">      </p>
  
  <p>How do I just make the edges lines and not ribbons?</p>