Das Hinzufügen von Tooltips zum Tortendiagramm mit d3.js

Question

Ich mache mich auf eine Reise, um zu lernen, wie man Daten mit d3.js visualisiert, und bisher finde ich "Interactive Data Visualization" von Scott Murray sehr hilfreich. Ich habe einige der Beispielcodes im Buchkapitel 11 durchgearbeitet und frage mich, wie ich den Tooltip zum Tortendiagramm hinzufügen könnte (im Buch wird bereits beschrieben, wie man dies beim Balkendiagramm macht). Wie auch immer, ich habe gerade ein paar Stunden mit den Codes herumgespielt und würde gerne sehen, ob mir jemand dabei helfen kann:

   D3: Pie layout

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

            Wichtige Label-Überschrift
            100%

        //Breite und Höhe
        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();

        // Farben einfach über eine 10-stufige ordinalen Skala zugänglich
        var color = d3.scale.category10();

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

        // Gruppen einrichten
        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() {
                        // Tooltip ausblenden
                        d3.select("#tooltip").classed("hidden", true);
                      });

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

        // Beschriftungen
        arcs.append("text")
            .attr("transform", function(d) {
                 return "translate(" + arc.centroid(d) + ")";
            })
            .attr("text-anchor", "middle")
            .text(function(d) {
                 return d.value;
            });

Ich weiß, dass dies etwas schwer zu verdauen ist, aber was ich genauer wissen möchte, ist, wie ich den x- und y-Wert für den Tooltip einstellen kann. Vielen Dank im Voraus.

Answer 1

Ich bevorzuge es, die Deckkraft zu verwenden, um den Tooltip anzuzeigen/auszublenden. Hier ist das FIDDLE. Das sollte Ihnen weiterhelfen.

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

Ich füge das Mausbewegungsereignis auf FernOfTheAndes's Antwort hinzu. Dadurch wird es zu einem hübscheren Anwendungsfall. Ich hoffe, dies wird hilfreich sein.

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