使用 d3.js 向饼图添加工具提示答案

【问题标题】：adding tooltips to pie chart using d3.js使用 d3.js 向饼图添加工具提示
【发布时间】：2014-05-14 12:38:42
【问题描述】：

我正在开始学习使用 d3.js 可视化数据的旅程，到目前为止，我发现 Scott Murray 的“交互式数据可视化”非常有用。我正在阅读本书第 11 章中的一些示例代码，并且想知道如何将工具提示添加到饼图中（本书已经使用条形图描述了此过程）。无论如何，过去几个小时一直在修改代码，想看看是否有人可以帮我解决这个问题：

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="utf-8">
   <title>D3: Pie layout</title>
   <script type="text/javascript" src="d3/d3.v3.js"></script>
   <style type="text/css">

            text {
               font-family: sans-serif;
               font-size: 12px;
               fill: white;
            }

            #tooltip {
               position: absolute;
               width: 200px;
               height: auto;
               padding: 10px;
               background-color: white;
               -webkit-border-radius: 10px;
               -moz-border-radius: 10px;
               border-radius: 10px;
               -webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
               -mox-box-shadow: 4px 4px 4px 10px rgba(0, 0, 0, 0.4);
               box-shadow: 4px 4px 10px rbga(0, 0, 0, 0.4)
               pointer-events: none;
            }

            #tooltip.hidden {
               display: none;
            }

           #tooltip p {
               margin: 0;
               font-family: sans-serif;
               font-size: 16px;
                        line-height: 20px;
           }
   </style>
</head>

<body>
    <div id="tooltip" class="hidden">
            <p><strong>Important Label Heading</strong></p>
            <p><span id="value">100</span>%</p>
    </div>
    <script type="text/javascript">

        //Width and height
        var w = 300;
        var h = 300;

        var dataset = [ 5, 10, 20, 45, 6, 25 ];

        var outerRadius = w / 2;
        var innerRadius = 0;
        var arc = d3.svg.arc()
                        .innerRadius(innerRadius)
                        .outerRadius(outerRadius);

        var pie = d3.layout.pie();

        // Easy colors accessible via a 10-step ordinal scale
        var color = d3.scale.category10();

        // Create SVG element
        var svg = d3.select("body")
                    .append("svg")
                    .attr("width", w)
                    .attr("height", h);

        // Set up groups
        var arcs = svg.selectAll("g.arc")
                      .data(pie(dataset))
                      .enter()
                      .append("g")
                      .attr("class", "arc")
                      .attr("transform", "translate(" + outerRadius + "," + outerRadius + ")")
                      .on("mouseover", function(d){
                        d3.select("#tooltip")
                          .select("#value")
                          .text(d);

                        d3.select("tooltip").classed("hidden",false);
                      })
                      .on("mouseout", function() {
                        // Hide the tooltip
                        d3.select("#tooltip").classed("hidden", true);
                      });

        // Draw arc paths
        arcs.append("path")
            .attr("fill", function(d, i) {
                 return color(i);
            })
            .attr("d", arc);

        // Labels
        arcs.append("text")
            .attr("transform", function(d) {
                 return "translate(" + arc.centroid(d) + ")";
            })
            .attr("text-anchor", "middle")
            .text(function(d) {
                 return d.value;
            });
    </script>
</body>
</html>

我知道这有点难以理解，但我想更具体地了解如何设置工具提示的 x 和 y 值。提前谢谢你。

【问题讨论】：

标签： javascript d3.js hover tooltip pie-chart

【解决方案1】：

我更喜欢使用不透明度来显示/隐藏工具提示。这是FIDDLE。这应该能让你继续前进。

d3.select("#tooltip")
    .style("left", d3.event.pageX + "px")
    .style("top", d3.event.pageY + "px")
    .style("opacity", 1)
    .select("#value")
    .text(d.value);

【讨论】：

正是我需要的，非常感谢。再次查看我的脚本，我还注意到我已经关闭了 css 部分中的指针事件 (pointer-events:none)。
感谢您的提琴 :) 我发现使用不透明度会在我的应用程序中导致一些故障行为 - 当工具提示不可见但仍位于图表的一部分上时，它会阻止 mouseover 事件从射击。所以我更喜欢只使用.style("display", "block") 和.style("display", "none")
@Daniel，很有趣。作为参考，我使用您的方法创建了另一个FIDDLE。谢谢。
使用这种方法的用户体验不是很好，当它在同一个元素上时，工具提示div不会随着鼠标移动而移动。

【解决方案2】：

我在 FernOfTheAndes 的回答中添加了鼠标移动事件，这将使它更漂亮的用例。希望这会有所帮助

.on("mouseover", function(d) {
  d3.select("#tooltip").style('opacity', 1)
    .select("#value").text(d.value);
})
.on("mousemove", function(d) {
  d3.select("#tooltip").style("top", (d3.event.pageY - 10) + "px")
  .style("left", (d3.event.pageX + 10) + "px");
})
.on("mouseout", function() {
  d3.select("#tooltip").style('opacity', 0);
});

【讨论】：