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); 

希望這有助於你開始。