javascript - Hur visar man värden ovanpå en nvd3 multi par-graf?

Jag vill att det faktiska värdet för varje stapel visas ovanpå på det sätt som det visas här

Jag försöker detta på ett stapeldiagram med flera serier.

Kan inte hitta referens någonstans.

Svar #1

Duplicera av Hur man visar värden i staplad multi-bar-diagram - nvd3-diagram

Det finns en lösning du kan implementera själv på https://gist.github.com/topicus/217444acb4204f364e46

REDIGERA: Kopierade koden om GitHub-länken tas bort:

// 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');
  });
});

Svar #2

Tydligen finns detta ännu inte. Det finns ett problem (https://github.com/novus/nvd3/issues/150) som stängdes eftersom detta (tydligen) är svårt att implementera.