D3JS Balkendiagramm Tooltip, übersetzt von vertikal nach horizontal

Question

Ich versuche, eine Tooltip für ein vertikales Balkendiagramm zu einem für ein horizontales Balkendiagramm verwendet zu übersetzen. Ich habe die Balken beim Überfahren der Maus hervorgehoben, aber der Tooltip wird nicht angezeigt. Also meine Frage ist was fehlt mir? Gibt es einen Ort, an dem ich die Richtung des Tooltips einstellen muss? Oder rufe ich den Tooltip nicht richtig an?

Hier ist meine Plunker: http://plnkr.co/edit/JhMRSAvxmvjqP4kE3X5v?p=preview

<style>  
    .d3-tip { 
    line-height: 1; 
    font-weight: bold; 
    padding: 12px; 
    background: rgba(0, 0, 0, 0.8); 
    color: #fff; 
    border-radius: 2px; 
} 

/* Creates a small triangle extender for the tooltip */ 
.d3-tip:after { 
    box-sizing: border-box; 
    display: inline; 
    font-size: 10px; 
    width: 100%; 
    line-height: 1; 
    color: rgba(0, 0, 0, 0.8); 
    content: "\25BC"; 
    position: absolute; 
    text-align: center; 
} 

/* Style northward tooltips differently */ 
.d3-tip.n:after { 
    margin: -1px 0 0 0; 
    top: 100%; 
    left: 0; 
} 
</style> 
var tip = d3.tip() 
    .attr('class', 'd3-tip') 
    .offset([-10, 0]) 
    .html(function(d) { 
     return "<strong>% Change in Income:</strong> <span style='color:#FFFFFF'>" + d.name; 
    }) 

Answer 1

Sie sind nicht Ihre Tooltip richtig aufrufen. Sie müssen mouseover und mouseout für die Balken aufrufen, damit sie wissen, wann der Tooltip angezeigt werden soll. Sie können tun, dass durch Zugabe von 2 Zeilen wie folgt aus:

svg.selectAll(".bar") 
    .data(data) 
    .enter().append("rect") 
    .attr("class", function(d) { return "bar bar--" + (d.value < 0 ? "negative" : "positive"); }) 
    .attr("x", function(d) { return x(Math.min(0, d.value)); }) 
    .attr("y", function(d) { return y(d.name); }) 
    .attr("width", function(d) { return Math.abs(x(d.value) - x(0)); }) 
    .attr("height", y.rangeBand()) 
    .on('mouseover', tip.show) //show tooltip when hovering over bar 
    .on('mouseout', tip.hide); //hide tooltip when not hovering over bar 

Darüber hinaus müssen Sie auch diese Zeile, nachdem Sie Ihre svg Variable deklarieren, damit es Ihre Tooltip-Funktion aufruft:

svg.call(tip); 

Aktualisiert Plunkr hier - http://plnkr.co/edit/X3O44dBuOGzEkqjUkyUC?p=preview