Làm cách nào để hiển thị các giá trị trên đầu biểu đồ đa nvd3?

Question

Tôi muốn giá trị thực tế của mỗi thanh được hiển thị trên đầu theo cách được hiển thị here

Tôi đang thử điều này trên multi bar chart.

Không thể tìm thấy tham chiếu ở bất kỳ đâu.

Answer 1

Tôi không chắc chắn những gì bạn đã thử rất béo, nhưng ví dụ trong here là khá thẳng về phía trước.

.showValues(true) khá nhiều mẹo.

Hy vọng điều đó sẽ hữu ích.

Answer 2

Dường như điều này chưa tồn tại. Đã xảy ra sự cố (https://github.com/novus/nvd3/issues/150) đã bị đóng vì điều này (dường như) khó thực hiện.

Answer 3

Duplicate của How to display values in Stacked Multi-bar chart - nvd3 Graphs

Có một sửa chữa, bạn có thể thực hiện cho mình ở https://gist.github.com/topicus/217444acb4204f364e46

EDIT: sao chép mã nếu liên kết github bị loại bỏ:

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