adding tooltips to pie chart using d3.js

StackOverflow https://stackoverflow.com/questions/22824846

Question

I am embarking on a journey to learn to visualize data using d3.js, and so far I am finding the "Interactive Data Visualization" by Scott Murray very helpful. I was following through some of the example codes in book chapter 11, and was wondering how I would add the tooltip to the pie chart (the book already describes this procedure using the bar chart). Anyways, just been tinkering around with the codes for past couple of hours and would like to see if anyone can lend me a hand on this:

<!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>

I know this is bit to digest, but what I want to know more specifically is how to set the x and y value for the tool-tip. Thank you in advance.

Was it helpful?

Solution

I prefer to use the opacity to show/hide the tooltip. Here is the FIDDLE. This should get you going.

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

OTHER TIPS

I'm adding mouse move event on FernOfTheAndes's answer, This will makes it more pretty usecase. Hope this will be helpful

.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);
});
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top