D3tip und gestapelte Balkendiagramme

Question

Ich habe vorher ein wirklich sauberes Balkendiagramm mit d3 und d3tip mit etwas Hilfe von StackOverflow gemacht (Ergebnis here). Dieses Mal versuche ich etwas Ähnliches mit d3tip zu erreichen, während ich ein gestapeltes Balkendiagramm verwende. Ich habe es geschafft, das gestapelte Balkendiagramm anhand von Beispielen aus dem Internet zu erstellen, aber es gelingt mir nicht, den Tipp zum Laufen zu bringen (Schnipsel des gestapelten Balkendiagramms here).

Wie Sie im Code-Schnipsel sehen Ich habe versucht, dies zu erreichen mit dem folgenden Code:

svg.selectAll(".g") 
    .data(data) 
    .enter().append("rect") 
    .attr("class", "bar") 
    .attr("x", function(d) { 
     return x(d.Year); 
    }) 
    .attr("width", x.rangeBand()) 
    .attr("y", function(d) { 
     return y(d.N); 
    }) 
    .attr("height", function(d) { 
     return height - y(d.N); 
    }) 
    .on('mouseover', tip.show) 
    .on('mouseout', tip.hide); 

, die bisher völlig in Ordnung ist. Aus irgendeinem Grund, wenn ich mit der Maus über die Balken fahre, wird nichts angezeigt. Ich erwartete einige Probleme mit den gestapelten Teilen, aber ich verstehe nicht, warum überhaupt kein Trinkgeld angezeigt wird.

Der Inhalt des Tipps ist noch zu entwickeln (ich diskutiere noch, was genau ich anzeigen möchte), aber ich glaube, es sollte zumindest einen Tipp zeigen. Was fehlt mir hier?

Answer 1

Ihr Mouseover ist an der falschen Stelle. Bevor Sie ein Balkendiagramm hatten und jetzt haben Sie ein gestapeltes Balkendiagramm (offensichtlich), aber die zurückgebrachten Daten werden unterschiedlich sein.

Zum Beispiel, Ihr mouseover tut nichts, weil der Ort, an dem es aufgerufen wird, nichts tut.

So habe ich die Maus gewechselt, wo Sie es brauchen, und die protokollierten Daten ist wie folgt:

Object {name: "Trek", y0: 43, y1: 86} 

Also statt d.Year & d.N, die nur Daten, die Sie ist d.name zurückbringen kann. Dies ist auf die Daten, die durch die Herstellung der Stapel gebracht werden:

data.forEach(function(d) { 
    var y0 = 0; 
    d.ages = color.domain().map(function(name) { return {name: name, y0: y0, y1: y0 += +d[name]}; }); 
    d.total = d.ages[d.ages.length - 1].y1; 
    }); 

So habe ich aktualisiert Sie diesen Tipp:

return "<strong>Name:</strong> <span style='color: #DA6A26'>" + d.name + "</span>" 

und bewegt Ihre Mouseover 100 auszukleiden:

.on('mouseover', function(d){ 
      console.log('mouseover'); 
      console.log(d) 
     tip.show(d); 
     }) 
     .on('mouseout', tip.hide); 

Ich habe die Logs für Sie dort gelassen, damit Sie sehen können, welche Daten ausgegeben werden.

Aktualisiert plnkr: http://plnkr.co/edit/nrslJjlM37Hu5DR2ZBXw?p=preview

Durch die Art und Weise Ihr Link auf die Datei css falsch war. Also statt css/style.css sollte es nur sein

Jetzt auf Mouseover, erhalten Sie Name. Wenn Sie das nicht möchten, müssen Sie beim Erstellen der Stacks die richtigen Daten mitbringen. Ie auf dieser Linie:

d.ages = color.domain().map(function(name) { return {name: name, y0: y0, y1: y0 += +d[name]}; });