title: D3: Substituting d3.svg.diagonal() with d3.svg.line()
body: <p>I have implemented the following graph with the edges rendered with d3.svg.diagonal(). However, when I try substituting the diagonal with d3.svg.line(), it doesn't appear to pull the target and source data. What am I missing? Is there something I don't understand about d3.svg.line?</p>
  
  <p><img src="https://i.stack.imgur.com/FTS3Z.jpg" alt="enter image description here"></p>
  
  <p>The following is the code I am referring to, followed by the full code:</p>
  
  <pre><code>var line = d3.svg.line()
      .x(function(d) { return d.lx; })
      .y(function(d) { return d.ly; });
  </code></pre>
  
  <p>...</p>
  
  <pre><code>var link= svg.selectAll("path")
      .data(links)
    .enter().append("path")
      .attr("d",d3.svg.diagonal())
      .attr("class", ".link")
      .attr("stroke", "black")
      .attr("stroke-width", "2px")
      .attr("shape-rendering", "auto")
      .attr("fill", "none"); 
  </code></pre>
  
  <p>The entire code:</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])
    .value(function(d) { return d.size; })
    .gap(50)                  
  
  var line = d3.svg.line()
      .x(function(d) { return d.lx; })
      .y(function(d) { return d.ly; });
  
  
  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("path")
      .data(links)
    .enter().append("path")
      .attr("d",d3.svg.diagonal())
      .attr("class", ".link")
      .attr("stroke", "black")
      .attr("stroke-width", "2px")
      .attr("shape-rendering", "auto")
      .attr("fill", "none");   
  
    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>A comparison of how the d attribute of the svg disappears when using "line."
  <img src="https://i.stack.imgur.com/7egnR.jpg" alt="enter image description here">
  <img src="https://i.stack.imgur.com/rEJJX.jpg" alt="enter image description here"></p>