d3 stacked area tooltip

Question

Ich habe diese gestapelte Flächendiagramm und ich versuche, den richtigen Wert zu bekommen, aber habe keine echte Idee, wie. Ich habe versucht, ein transparentes Rechteck über das Diagramm zu legen, aber dann erkannte ich, dass ich immer noch keine Ahnung habe, wie man die Werte bekommt.

.on("mousemove", function(d) { 
     tooltip 
     .style("display", "inline-block") 
     .html(d[0][1]); 
    }) 

Dies wird mir nur einen festen Wert geben.

Hier ist meine plunker

Vielleicht euch eine Idee.

Answer 1

Wenn Sie das Datenobjekt (d) untersuchen, obwohl es Array-ähnlich ist, können Sie sehen, dass es auch Schlüssel- und Indexeigenschaften hat, und das sollte Sie zu den richtigen Daten führen.

.on("mousemove", function(d) { 
    tooltip 
    .style("display", "inline-block") 
    .html(d[d.index].data[d.key]); 
}) 

Der Schlüssel wird durch den Schlüssel Accessor stack.keys bestimmt (...), die Sie in Ihrem Plunker definiert haben.

Siehe auch die Dokumentation für den Stapelgenerator: https://github.com/d3/d3-shape/blob/master/README.md#stacks