title: Raphael JS PieChart selecting sections
body: <p>I have used the JS library Raphael to create a pie chart.  I am wanting to assign each sector some text so that I can display the text in the middle of the circle when you hover over a specific section.  So first I need to select a specific section of the circle and assign it as a variable and add text to it.  Can anyone help me figure out how to select the first section in the circle??</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
      &lt;head&gt;
          &lt;meta charset="utf-8"&gt;
          &lt;title&gt;g·Raphaël Dynamic Pie Chart&lt;/title&gt;
          &lt;link rel="stylesheet" href="demo.css" media="screen"&gt;
          &lt;link rel="stylesheet" href="demo-print.css" media="print"&gt;
          &lt;script src="raphael.js"&gt;&lt;/script&gt;
          &lt;script src="g.raphael.js"&gt;&lt;/script&gt;
          &lt;script src="g.pie.js"&gt;&lt;/script&gt;
  
          &lt;style type="text/css"&gt;
  
          body {
      background: #fff;
      font: 100.01% "Fontin Sans", Fontin-Sans, "Myriad Pro", "Lucida Grande", "Lucida Sans Unicode", Lucida, Verdana, Helvetica, sans-serif;
      color: #000;
      margin: 10px 0 0 0;
      padding: 0;
      text-align: center;
  }
  
  #holder {
      margin: 0 auto;
      width: 640px;
      height: 480px;
  }
  
  p {
      text-align: left;
      margin: .5em 2em;
  }
  
          &lt;/style&gt;
  
          &lt;script&gt;
          //BUG FOUND if the user scrolls over where the original sector would be and keeps going in and out of the original region
          //the sector keeps getting bigger and bigger....it is tougher to do with a smaller animation time
  
              window.onload = function () {
                  //creates raphael canvas located at the specified id
                  var r = Raphael("holder"),
                      //creates piechart in raphael (x, y, radius) [  amounts which are distributed according to sum ]  ??legend?? ??href??
                      pie = r.piechart(320, 240, 100, [70,20,5,5], { legend: ["%%.%% - Enterprise Users", "IE Users"], legendpos: "southeast", href: ["http://raphaeljs.com", "http://g.raphaeljs.com"]});
  
                      //inner circle
                      innner = r.circle(320,240, 60).attr("fill", "red");
                      //invisible circle for text
                      innertext = r.circle(320,240,60).attr({"fill-opacity":"0"});
  
                  //writes text at specified location
                  r.text(320, 100, "Interactive Pie Chart").attr({ font: "20px sans-serif" });
                  pie.hover(function () {
                      //if the user tries hovering over while the animation is finishing up in the specified time for the
                      //animation to last the user will not get the desired effect.  this says that the animation is over
                      //once the function is called again
                      this.sector.stop();
                      //describes how big the sector will be when hovered over
                      this.sector.scale(1.1, 1.1, this.cx, this.cy);
  
                      //does the same as above telling the legends to stop and what to do during animation
                      if (this.label) {
                          this.label[0].stop();
                          this.label[0].attr({ r: 7.5 });
                          this.label[1].attr({ "font-weight": 800 });
                      }
                  }, function () {
                      //tells the selected sector to animate at the given speed and animation type
                      this.sector.animate({ transform: 's1 1 ' + this.cx + ' ' + this.cy }, 500, "bounce");
  
                      //creates the labesls in the legend and describes how they will be animated
                      if (this.label) {
                          this.label[0].animate({ r: 5 }, 500, "linear");
                          this.label[1].attr({ "font-weight": 400 });
                      }
                  });
              };
          &lt;/script&gt;
      &lt;/head&gt;
      &lt;body class="raphael" id="g.raphael.dmitry.baranovskiy.com"&gt;
          &lt;div id="holder"&gt;&lt;/div&gt;
          &lt;p&gt;
              Pie chart with legend, hyperlinks on two first sectors and hover effect.
          &lt;/p&gt;
  
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>