NVD3.js - 如何将条形文字添加到堆叠图形中的每个条形图？

Question

我在NVD3/AngularJS中创建了一个多条形图表。我想在每个矩形条内显示文本及其值，如下面的JSON所示。

如何在每个栏内的图形上显示文本值？

NVD3图表定义

multiBarChart: { 
     options: function(){ 
      return { 
      chart: { 
       type: 'multiBarChart', 
       stacked: true, 
       x: function(d){return d.x;}, 
       y: function(d){return d.y;}, 
       text: function(d){return d.x;}, 
       showLabels: true, 
       showLegend: false, 
       transitionDuration: 500, 
       forceX: ["Team", "Meeting", "Phase", "Source"], 
       xAxis: { 
       axisLabel: 'Category', 
       axisLabelDistance: -8 
       }, 
       yAxis: { 
       axisLabel: 'Number Of Action Items', 
       } 
      } 
      } 
     }, 
     data: categoryChartData 
     } 

JSON数据（categoryChartData）

[ 
           {"values" : [ 
            { 
             "y" :10, 
             "x" : "Team" 
            }, { 
             "y" : 0, 
             "x" : "Meeting" 
            }, 
            { 
             "y" :0, 
             "x" : "Phase" 
            }, { 
             "y" : 0, 
             "x" : "Source" 
            } 
            ], 
            "key" : "Team1" 
           }, 

           {"values" : [ 
            { 
             "y" :5, 
             "x" : "Team" 
            }, { 
             "y" : 0, 
             "x" : "Meeting" 
            }, 
            { 
             "y" :0, 
             "x" : "Phase" 
            }, { 
             "y" : 0, 
             "x" : "Source" 
            } 
            ], 
            "key" : "Team2" 
           }, 
            {"values" : [ 
            { 
             "y" :0, 
             "x" : "Team" 
            }, { 
             "y" : 7, 
             "x" : "Meeting" 
            }, 
            { 
             "y" :0, 
             "x" : "Phase" 
            }, { 
             "y" : 0, 
             "x" : "Source" 
            } 
            ], 
            "key" : "Meeting1" 
           }, 
            {"values" : [ 
            { 
             "y" :0, 
             "x" : "Team" 
            }, { 
             "y" : 3, 
             "x" : "Meeting" 
            }, 
            { 
             "y" :0, 
             "x" : "Phase" 
            }, { 
             "y" : 0, 
             "x" : "Source" 
            } 
            ], 
            "key" : "Meeting2" 
           }, 
           {"values" : [ 
            { 
             "y" :0, 
             "x" : "Team" 
            }, { 
             "y" : 0, 
             "x" : "Meeting" 
            }, 
            { 
             "y" :9, 
             "x" : "Phase" 
            }, { 
             "y" : 0, 
             "x" : "Source" 
            } 
            ], 
            "key" : "Phase1" 
           }, 
           {"values" : [ 
            { 
             "y" :0, 
             "x" : "Team" 
            }, { 
             "y" : 0, 
             "x" : "Meeting" 
            }, 
            { 
             "y" :5, 
             "x" : "Phase" 
            }, { 
             "y" : 0, 
             "x" : "Source" 
            } 
            ], 
            "key" : "Phase1" 
           }, 
           {"values" : [ 
            { 
             "y" :0, 
             "x" : "Team" 
            }, { 
             "y" : 0, 
             "x" : "Meeting" 
            }, 
            { 
             "y" :0, 
             "x" : "Phase" 
            }, { 
             "y" : 2, 
             "x" : "Source" 
            } 
            ], 
            "key" : "Internal" 
           }, 
           {"values" : [ 
            { 
             "y" :0, 
             "x" : "Team" 
            }, { 
             "y" : 0, 
             "x" : "Meeting" 
            }, 
            { 
             "y" :0, 
             "x" : "Phase" 
            }, { 
             "y" : 1, 
             "x" : "Source" 
            } 
            ], 
            "key" : "Customer" 
           } 


           ]; 

Answer 1

角nvd3并不多条形图做到这一点本身，由于一些复杂的动画堆叠酒吧，但它会离散条形图，探索this previous stackoverflow question。但是，在更新他对这个问题的回答时，@Topicus链接到a gist he/she wrote，它完成了您要查找的内容。

我适应了你的情况;你可以在this plunker看到结果。如果标签显示有点不整洁，您可以稍微使用格式。关键在于标签需要在动画完成后添加，所以我将timeout设置为等于（也可能稍大于）transitionDuration图表属性的值。我也删除了所有的零值，所以它们不会掩盖非零值。

$scope.options = { 
    chart: { 
    type: 'multiBarChart', 
    height: 500, 
    transitionDuration: 500, 
    ... 
    } 
}; 

$scope.data... 

$timeout(function() { 
    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(){ 
     // No decimals format and eliminate zero values 
     if (bar.y === 0) { 
      return; 
     } 
     return parseFloat(bar.y).toFixed(0); 
     }) 
     .attr('y', function(){ 
     // Center label vertically 
     var height = this.getBBox().height; 
     return parseFloat(b.attr('y')) + 15; // 15 is the label's margin from the top of bar 
     }) 
     .attr('x', function(){ 
     // Center label horizontally 
     var width = this.getBBox().width; 
     return parseFloat(b.attr('x')) + (parseFloat(barWidth)/2) - (width/2); 
     }) 
     .style("stroke","black") 
     .attr('class', 'bar-values'); 
    }); 
    }); 
}, 500); 

希望这有助于你开始。