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

Question

我正在踏上学习使用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值。 先感谢您。

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

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

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

问题描述

2 个解决方案

解决方案1
12 已采纳 2014-04-03 00:09:21

解决方案2
1 2016-07-13 13:50:28

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

问题描述

2 个解决方案

解决方案1 12 已采纳 2014-04-03 00:09:21

解决方案2 1 2016-07-13 13:50:28

解决方案1
12 已采纳 2014-04-03 00:09:21

解决方案2
1 2016-07-13 13:50:28