एनवीडी 3 मल्टी पैरा ग्राफ के शीर्ष पर मूल्य कैसे प्रदर्शित करें?

Question

मैं हर बार के वास्तविक मूल्य जिस तरह से यह दिखाया गया है here

मैं multi bar chart पर इस कोशिश कर रहा हूँ में शीर्ष पर प्रदर्शित करना चाहते हैं।

कहीं भी संदर्भ नहीं मिला।

Answer 1

मुझे यकीन नहीं है कि आपने इतनी मोटी कोशिश की है, लेकिन here में उदाहरण काफी सीधे है।

.showValues(true) बहुत अधिक चाल है।

उम्मीद है कि यह मदद करता है।

Answer 2

स्पष्ट रूप से यह अभी तक मौजूद नहीं है। एक मुद्दा है (https://github.com/novus/nvd3/issues/150) जो बंद था क्योंकि यह (स्पष्ट रूप से) लागू करने के लिए कठिन है। कोड को कॉपी किया गया है, तो GitHub लिंक हटा दिया जाता है:

Answer 3

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

की डुप्लीकेट वहाँ एक ठीक आप पर https://gist.github.com/topicus/217444acb4204f364e46

संपादित करें खुद को लागू कर सकते है

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