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

问题： Tooltip 总是返回 Total 列的第一个值，即 13817。如何根据鼠标悬停的弧线动态显示正确的值？

---

编辑：在代码 sn-p 和 HTML 工具提示模板中添加了第二个数据点 #UniversityName。

问题 2 正如@minikomi 指出的那样，正确的数据绑定将导致正确获取与每个弧相关的值。但是，似乎每条弧都附加了一个值，正确地是标记为 Total 的值。 然而，这会将每行的其余数据留在哪里，例如 Female、Male 或 Year？如何将它们也绑定到工具提示？

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 时，不仅会创建饼图的一个片段，而且每个片段还会绑定一个数据点。

因此，当您告诉段对鼠标悬停事件作出反应时，回调函数的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);
            })