title: How can a tooltip in D3 fetch data dynamically?
body: <p>We have some data </p>
  
  <pre><code>University,Total,Females,Males,Year,Type
  PortSaid,13817,6679,7138,2012,Public
  PortSaid,14790,7527,7263,2013,Public
  PortSaid,17295,8509,8786,2010,Public
  6OctoberUniversity,12507,4297,8210,2012,Private
  6OctoberUniversity,14608,5360,9248,2013,Private
  </code></pre>
  
  <p>I try to create piechart like this <a href="http://bl.ocks.org/mbostock/32bd93b1cc0fbccc9bf9" rel="nofollow">Block</a> with a dynamic tooltip attached. 
  I create a HTML element manually</p>
  
  <pre><code>        &lt;p&gt;
              &lt;strong&gt;University is &lt;/strong&gt;
              &lt;span id="UniversityName"&gt;&lt;/span&gt;
          &lt;/p&gt;
          &lt;p&gt;&lt;span id="NumberStudents"&gt;&lt;/span&gt; Students&lt;/p&gt;
  </code></pre>
  
  <p>And the code for creating the arcs and the tooltips </p>
  
  <pre><code>        svg.selectAll("path")
              .data(pie(data))
            .enter().append("path")
              .each(function(d) { d.outerRadius = outerRadius - 20; })
              .attr("d", arc)
              .on("mouseover", arcTween(outerRadius, 0))
              .on("mouseout", arcTween(outerRadius - 20, 150))
              .on("mouseover", function(d) {
                  var xPosition = 100;
                  var yPosition = 100;
                  d3.select("#tooltip")
                      .data(pie(data))
                        .style("left", xPosition + "px")
                        .style("top", yPosition + "px")
                        .select("#NumberStudents")
                          .text(function(d) { return d.value })
                        .select("#UniversityName")
                          .text(function(d) { return d.value });
                      //Show the tooltip
                  d3.select("#tooltip").classed("hidden", false);
                  })
              .on("mouseout", function() {
  
                  //Hide the tooltip
                  d3.select("#tooltip").classed("hidden", true);          
             })
  </code></pre>
  
  <p><strong>The Question</strong>:
  The Tooltip always returns the first value of the Total column, i.e. 13817. How can it dynamically display the correct value according to the mouseovered arc?</p>
  
  <hr>
  
  <p>EDIT: Added second data point #UniversityName in code snippet &amp; in HTML tooltip template.</p>
  
  <p><strong>Question 2</strong>
  As @minikomi points out, correct data binding would result in the value associated with each arc being fetched correctly. However, it seems that a each arc has a single value attached to it, correctly the one labeled <strong>Total</strong>. 
  Yet, where does this leave the rest of the data per row, as in <strong>Female, Male</strong> or <strong>Year</strong>? How can I bind them to the tooltip as well? </p>