Jak wyświetlić wartości na wielu wykresach nvd3?

Question

Chcę rzeczywista wartość każdego paska wyświetlana na górze w taki sposób to pokazane here

próbuję to na multi bar chart.

Nie można znaleźć odwołania w dowolnym miejscu.

Answer 1

Nie jestem pewien, co tak bardzo się starało, ale przykład w here jest całkiem prosty.

.showValues(true) prawie wszystko.

Mam nadzieję, że to pomaga.

Answer 2

Wygląda na to, że jeszcze nie istnieje. Wystąpił problem (https://github.com/novus/nvd3/issues/150), który został zamknięty, ponieważ jest (podobno) trudny do wdrożenia.

Answer 3

Duplikat How to display values in Stacked Multi-bar chart - nvd3 Graphs

Jest fix można wdrożyć u siebie w https://gist.github.com/topicus/217444acb4204f364e46

EDIT: skopiował kod jeśli link github zostanie usunięty:

// You need to apply this once all the animations are already finished. Otherwise labels will be placed wrongly. 

d3.selectAll('.nv-multibar .nv-group').each(function(group){ 
    var g = d3.select(this); 

    // Remove previous labels if there is any 
    g.selectAll('text').remove(); 
    g.selectAll('.nv-bar').each(function(bar){ 
    var b = d3.select(this); 
    var barWidth = b.attr('width'); 
    var barHeight = b.attr('height'); 

    g.append('text') 
     // Transforms shift the origin point then the x and y of the bar 
     // is altered by this transform. In order to align the labels 
     // we need to apply this transform to those. 
     .attr('transform', b.attr('transform')) 
     .text(function(){ 
     // Two decimals format 
     return parseFloat(bar.y).toFixed(2); 
     }) 
     .attr('y', function(){ 
     // Center label vertically 
     var height = this.getBBox().height; 
     return parseFloat(b.attr('y')) - 10; // 10 is the label's magin from the bar 
     }) 
     .attr('x', function(){ 
     // Center label horizontally 
     var width = this.getBBox().width; 
     return parseFloat(b.attr('x')) + (parseFloat(barWidth)/2) - (width/2); 
     }) 
     .attr('class', 'bar-values'); 
    }); 
});