NVD3多条形图标签

Question

我正在尝试标记多条形图。我有标签问题。我希望有人可以帮助我。我几乎在那里，标签不对齐，我不知道为什么。

我的图表可用here：

var chart_monthly;
var fundLabel_monthly;
var withSalesChargeFund_monthly;
var woutSalesChargeFund_monthly;
var indexPerformanceData_monthly;
var indexName_monthly;

var displaycase = true;

var yMin, yMax;
var width = 864;
var height = 380;

fundLabel_monthly = $("[id$='_hfAvgReturnFundLabel']").val(); // yields string, e.g. Genesis Fund, Class Trust - NBGEX


var keys = ['Class Trust', 'Class Institutional', 'Class Advisor', 'Class Investor', 'Class R3']

for (i = 0; i < keys.length; i++) {
    var patt = new RegExp(keys[i]);
    if (patt.test(fundLabel_monthly)) {
        displaycase = false; // tells code to swap default to Without Sales Charge data set
        break;
    }
}

if (displaycase == false) {
    $("[id$='monthly_saleschargetoggle']").hide();
    withSalesChgFlag = false;  //override what is passed in as for non A and C, there are no sales charges.
} else {
    $("[id$='monthly_saleschargetoggle']").show();
}

indexName_monthly = $("[id$='_hfPrimaryBenchmarkName']").val();

if (indexName_monthly.length == 0 || indexName_monthly.length == 0)
    return;


withSalesChargeFund_monthly = jQuery.parseJSON($("[id$='_hfWithSalesChargeFundMonthly']").val());

woutSalesChargeFund_monthly = jQuery.parseJSON($("[id$='_hfWoutSalesChargeFundMonthly']").val());

indexPerformanceData_monthly = jQuery.parseJSON($("[id$='_hfIndexPerformanceData']").val());

if (withSalesChargeFund_monthly.length == 0 || woutSalesChargeFund_monthly.length == 0 || indexPerformanceData_monthly.length == 0) {
    return false;
}


var data = withSalesChgFlag ? getMonthlyDataWithSalesCharge() : getMonthlyDataWoutSalesChart();

nv.addGraph(function () {
    chart_monthly = nv.models.multiBarChart()       
              .rotateLabels(0)      //Angle to rotate x-axis labels.
              .showControls(false)   //Allow user to switch between 'Grouped' and 'Stacked' mode.              
              .groupSpacing(0.1)    //Distance between each group of bars.
              ;

                    //create an array of all the y data points
    var yArray = [];
    for (i = 0; i < data[0].values.length; i++) {   
        yArray.push(data[0].values[i].y);
    }
    for (i = 0; i < data[1].values.length; i++) {   
        yArray.push(data[1].values[i].y);
    }       

    var xArray = [];
    for (i = 0; i < data[0].values.length; i++) {   
        xArray.push(data[0].values[i].x);
    }
    for (i = 0; i < data[1].values.length; i++) {   
        xArray.push(data[1].values[i].x);
    }       

    yArray = yArray.sort(function(a,b){return a - b});
    xArray = xArray.sort(function(a,b){return a - b});

    yMax = d3.max(yArray);
    yMin = d3.min(yArray);      

    yMax = Math.ceil(yMax+5);
    yMin = Math.ceil(yMin-5);

    var y = d3.scale.linear().range([height,0]).domain([yMin,yMax]);
    var x = d3.scale.ordinal().rangeRoundBands([0, width], 0.1).domain(xArray);

    chart_monthly.yAxis.showMaxMin(false);
    chart_monthly.xAxis.tickFormat(function (d) {
        var index = d.replace(/^\d+_/, '');

        if (index < data[0].values.length) {
            var label = data[0].values[index].label;

            if (typeof label !== 'undefined') {
                return label.replace(/(\d\d)(\d\d)$/, '$2').replace(/<br.+$/, '');
            } else {
                return '/';
            }
        } else {
            return '-';
        }
    });


    chart_monthly.yAxis.tickFormat(function (d) {
            return d3.format(",.2f")(d) + '%';
    });


    chart_monthly.forceY([yMin, yMax]);
    debugger;

    d3.select('#nd3Chart')
  .datum(data)
  .call(chart_monthly);

    var yTextPadding = 20;

    d3.select('#nd3Chart .nv-series-0').selectAll("rect").select("text")
       .data(data[0].values)           
       .enter()
       .append("text")
       .text(function(d,i) {    
            console.log(d.y)
            if ( d.y == 0.00000001)
                return "N/A";
            else
                return (d.y + "%");             
       })   
        .attr('x',  function(d) { 

            //return (x(d.x)+15)
            debugger;

            console.log(x(i));
                            return x(i)+x.rangeBand();
        }
             )
        .attr('y', function(d) 
        {       
            if (d.y<0)          
                return (y(d.y)+30);         
            else            
                return height-y(d.y)+yTextPadding;

            //if (d.y<0)            
            //  return (y(d.y)-30);         
            //else          
            //  return (y(d.y)-15);         
        })
        .attr("font-family", "sans-serif")
        .attr("font-size", "11px")
        .attr("fill", "black")
        .attr("text-anchor", "middle")
      ;         


  //////////////////////////////////////////////////

    d3.select('#nd3Chart .nv-series-1').selectAll("rect").select("text")
       .data(data[1].values)           
       .enter()
       .append("text")
       .text(function(d,i) {    
            console.log(d.y)
            if ( d.y == 0.00000001)
                return "N/A";
            else
                return (d.y + "%");             
       })   
        .attr('x',  function(d,i) { 
            return x(i)+x.rangeBand()/2;
        })
        .attr('y', function(d, i) 
        {       
            if (d.y<0)          
                return (y(d.y)+30);         
            else            
                return height-y(d.y)+yTextPadding;
        })
        .attr("font-family", "sans-serif")
        .attr("font-size", "11px")
        .attr("fill", "black")
        .attr("text-anchor", "middle")
      ;         



    nv.utils.windowResize(chart_monthly.update);
});


function getMonthlyDataWithSalesCharge() {

    return [
     {
         "key": fundLabel_monthly,
         "color": "#123a5f",
         "values": withSalesChargeFund_monthly
     },
    {
        "key": indexName_monthly,
        "color": "#56a0d3",
        "values": indexPerformanceData_monthly
    }
   ];
}

function getMonthlyDataWoutSalesChart() {

    return [
    {
        "key": fundLabel_monthly,
        "color": "#123a5f",
        "values": woutSalesChargeFund_monthly
    },
    {
        "key": indexName_monthly,
        "color": "#56a0d3",
        "values": indexPerformanceData_monthly
    }
   ];
}

由于 亚历