如何顯示nvd3多方位圖上的值？

Question

我想每個欄的實際值顯示在上面的方式here

我想在multi bar chart這個。

在任何地方都找不到參考。

Answer 1

我不確定你試過這麼胖，但here中的例子非常簡單。

.showValues(true)幾乎沒有訣竅。

希望它有幫助。

Answer 2

顯然這還不存在。有一個問題（https://github.com/novus/nvd3/issues/150）被關閉，因爲這顯然很難實現。

Answer 3

重複的How to display values in Stacked Multi-bar chart - nvd3 Graphs

有一個修復程序，你可以在https://gist.github.com/topicus/217444acb4204f364e46

編輯自己實現：複製的代碼，如果GitHub的鏈接被刪除：

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