title: How to draw lines between circles?
body: <p>I'm attemtping to draw three circles and draw connected lines between each of these circles.</p>
  
  <p>The end goal is to configure what circles are connected using json configuration but prior to this im just trying to connect the circles using the callbacks and hard code values.</p>
  
  <p>Here is what I have so far : </p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
        &lt;script src="http://d3js.org/d3.v3.min.js" charset="utf-8"&gt;&lt;/script&gt;
     &lt;/head&gt;
  &lt;body style="overflow: hidden;"&gt;
  &lt;div id="canvas"  style="overflow: hidden;"&gt;&lt;/div&gt;
  
  &lt;script type="text/javascript"&gt;
      var graph = {
          "nodes":[
              {"name":"1","group":1, "x" : 100, "y" : 100 , r : 20},
              {"name":"2","group":1, "x" : 200, "y" : 150 ,r : 30},
              {"name":"3","group":2 , "x" : 300, "y" : 250 , r : 50}
          ],
          "links":[
              {"source":1,"target":0,"value":1}
          ]
      }
  
      var width = 2000;
      var height = 500;
  
      var svg = d3.select("#canvas").append("svg")
              .attr("width", width)
              .attr("height", height)
          .append("g");
  
      var lines = svg.attr("class", "line")
              .selectAll("line").data(graph.links)
              .enter().append("line")
              .attr("x1", function(d) { return 50 })
              .attr("y1", function(d) { return 50 })
              .attr("x2", function(d) { return 100 })
              .attr("y2", function(d) {  return 100 })
  
      var circles = svg.selectAll("circle")
              .data(graph.nodes)
              .enter().append("circle")
              .style("stroke", "gray")
              .style("fill", "white")
              .attr("r", function(d, i){ return d.r })
              .attr("cx", function(d, i){ return d.x })
              .attr("cy", function(d, i){ return d.y })
  
  &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>But no lines are being drawn. Each circle should contain a single line connecting it to the other circle.
  I'm just hard coding the x1,y1,x2,y2 co-ordinates but I will be using the 
  co-ordinates of the other circles in order to determine the postions of the lines. Why are the lines not being drawn ? Is there standard d3 methods I should be utilising in order to connect these circles ? </p>
  
  <p>fiddle : <a href="http://jsfiddle.net/zzz8svuq/10/" rel="nofollow">http://jsfiddle.net/zzz8svuq/10/</a></p>
  
  <p>Update : </p>
  
  <p>Here is the updated code which draws connected lines between circles as configured in dataset graph.nodes : </p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
        &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"&gt;&lt;/script&gt;
        &lt;script src="http://d3js.org/d3.v3.min.js" charset="utf-8"&gt;&lt;/script&gt;
     &lt;/head&gt;
  &lt;body style="overflow: hidden;"&gt;
  &lt;div id="canvas"  style="overflow: hidden;"&gt;&lt;/div&gt;
  
  &lt;script type="text/javascript"&gt;
  
      var graph = {
          "nodes": [
              {name: "1", "group": 1, x: 100, y: 50, r: 10 , connected : "2"},
              {name: "2", "group": 1, x: 200, y: 90, r: 15, connected : "1"},
              {name: "3", "group": 2, x: 300, y: 230, r: 25, connected : "1"}
          ] 
      }
  
  
      $( document ).ready(function() {
  
          var width = 2000;
          var height = 500;
  
          var svg = d3.select("#canvas").append("svg")
                  .attr("width", width)
                  .attr("height", height)
                  .append("g");
  
          var lines = svg.attr("class", "line")
                  .selectAll("line").data(graph.nodes)
                  .enter().append("line")
                  .style("stroke", "gray") // &lt;&lt;&lt;&lt;&lt; Add a color
                  .attr("x1", function (d, i) {
                      return d.x
                  })
                  .attr("y1", function (d) {
                      return d.y
                  })
                  .attr("x2", function (d) {
                      return findAttribute(d.connected).x
                  })
                  .attr("y2", function (d) {
                      return findAttribute(d.connected).y
                  })
  
          var circles = svg.selectAll("circle")
                  .data(graph.nodes)
                  .enter().append("circle")
                  .style("stroke", "gray")
                  .style("fill", "white")
                  .attr("r", function (d, i) {
                      return d.r
                  })
                  .attr("cx", function (d, i) {
                      return d.x
                  })
                  .attr("cy", function (d, i) {
                      return d.y
                  });
  
      });
  
      function findAttribute(name) {
          for (var i = 0, len = graph.nodes.length; i &lt; len; i++) {
              if (graph.nodes[i].name === name)
                  return graph.nodes[i]; // Return as soon as the object is found
          }
          return null; // The object was not found
      }
  
  
  &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>