title: Connecting objects with a line in Raphael
body: <p>I have a list of json objects.</p>
  
  <pre><code>var Planets = [
              {name:"maths", percComp: "2", preReq: "english"},
              {name:"english", percComp: "20", preReq: "geog"},
              {name:"geog", percComp: "57", preReq: "maths"}          
          ];
  </code></pre>
  
  <p>These objects are planets that i will add to a universe. They are school subjects</p>
  
  <p>I also have a planet class</p>
  
  <pre><code>function Planet(planet, index)
      {
          this.name = planet.name;
          this.percComp = planet.percComp;
          this.preReq = planet.preReq;
          CreatePlanet(this, index);
          this.line = paper.path('');
  
          function RedrawLine(planetFrom, planetTo, strokeWidth)
          {
              line.attr({
                  path:"M" + planetFrom.attrs.cx + "," + planetFrom.attrs.cy + "L"+ planetTo.attrs.cx + "," + planetTo.attrs.cy,
                  "stroke-width": strokeWidth
              }); 
          }
  
          function CreatePlanet(planet)
          {
              var planetName = planet.name;
              planetName = paper.circle(200 * index, 100, 80/index);
              planetName.attr({ 
                  fill:'red',
                  stroke: '#3b4449',
                  'stroke-width': 6               
              });
  
              SetGlow(30, true, 0, 0, 'grey', planetName)
              SetHover(planetName);
          }
  
          function SetHover(planet)
          {
              var radius = planet.attrs.r;
              planet.mouseover(function(){
                  this.animate({ r: radius * 1.3}, 150)
              }).mouseout(function(){
                  this.animate({ r: radius}, 150)
              })
          }
  
          function SetGlow(width, fill, offSetx, offsety, color, planet)
          {
              planet.glow({
                  width: 30,
                  fill: true,
                  offsetx: 0,
                  offsety: 0,
                  color: 'grey'
              });
          }
  
      }
  </code></pre>
  
  <p>The code to initiate the program is</p>
  
  <pre><code>var element = document.getElementById('Main-Content')
  var paper = new Raphael(element, 1000, 1000);
  
  
      window.onload = function()
      {
  
          var planetsSet = paper.set();
  
          var index = 1;
          $(jQuery.parseJSON(JSON.stringify(Planets))).each(function(){
              var planet = new Planet(this, index);
              planetsSet.push(planet);
              index++;
          });
  
          for (i=0; i&lt;planetsSet.length; i++)
          {
              var planetTo = planetsSet[i];
                              // This is a test to see if RedrawLine works
                              var planeFrom = planetsFrom[i+1];
              planetTo.RedrawLine(planetTo, planeFrom, 30)
              var preReq = this.preReq;          
          }
      }
  </code></pre>
  
  <p>The code populates the screen with 3 planets. I am trying to connect these with a line. The line will connect a planet with its pre requisite that is declared in the json object. So maths has a pre requisite english, and english has a pre requisite geog. I have a function in the Planet class that will draw the line, but I cant access the objects after they have been drawn.</p>
  
  <p>Is this a problem with Raphael or can it be done?</p>