D3中的工具提示如何动态获取数据？

Question

我们有一些数据

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 

我尝试创建饼图这样Block附有一个动态提示。 我创建了一个HTML元素手动

 <p> 
      <strong>University is </strong> 
      <span id="UniversityName"></span> 
     </p> 
     <p><span id="NumberStudents"></span> Students</p> 

和创建弧代码和工具提示

 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);   
      }) 

问题： 工具提示总是返回总计列的第一个值，即13817.它如何根据鼠标悬停弧动态显示正确的值？

---

编辑：在HTML模板提示代码片段&添加第二个数据点#UniversityName。

问题2 作为@minikomi指出的，正确的数据结合将导致与每个弧被获取正确地相关联的值。然而，似乎每条弧线都有一个附加的值，正确的标记为合计。 但是，这会在何处留下每行的其余数据，如女性，男性或年？我怎样才能将它们绑定到工具提示？

Answer 1

这可能是值得回顾d3 & data binding背后的想法。

这里：

.on("mouseover", function(d) { 
      var xPosition = 100; 
      var yPosition = 100; 
      d3.select("#tooltip") 
       .data(pie(data)) // re-bind tooltip with entire data set 
        .style("left", xPosition + "px") 
        .style("top", yPosition + "px") 
        .select("#NumberStudents") 
        .text(function(d) { return d.value }); 
       //Show the tooltip 
      d3.select("#tooltip").classed("hidden", false); 
      }) 

原始data是一个数组。当您使用.data,.enter和.each时，不仅会创建饼图的一部分，而且每个部分还会绑定一个数据点。

因此，当您告诉段响应mouseover事件时，回调函数的参数d将由d3设置为该段的绑定数据点。

相反，在上面的代码中，选择#tooltip元素之后，有以.data(pie(data))通话 - 将结合的整个数据每次鼠标悬停时间设置的提示 - 而且是意外的行为的原因你观察。

相反，使用单个数据项（在此函数中d），并将其值设定工具提示文本：

.on("mouseover", function(d) { 
      // d = the single data point used 
      //  to create the segment here 
      var xPosition = 100; 
      var yPosition = 100; 
      d3.select("#tooltip") 
       .style("left", xPosition + "px") 
       .style("top", yPosition + "px") 
       .select("#NumberStudents") 
        .text(d.value); 

      d3.select("#tooltip").classed("hidden", false); 
      }) 

要访问的其它值（从用于创建一个单独的饼片），请检查docs的饼图布局。原始数据将位于d的.data属性中。因此，举例来说，假设你的提示有#SchoolType<span>那么你可以从Type属性一样设置文本：

.on("mouseover", function(d) { 

      var xPosition = 100; 
      var yPosition = 100; 
      d3.select("#tooltip") 
       .style("left", xPosition + "px") 
       .style("top", yPosition + "px") 
       .select("#NumberStudents") 
        .text(d.value) 

      //d.data will hold the original data map 
      d3.select("#tooltip #SchoolType").text(d.data["Type"]); 

      d3.select("#tooltip").classed("hidden", false); 
      })