在 NVD3 中将 x 轴范围更改为子弹图的百分比

Question

请帮助我如何将子弹图的 x 轴范围更改为百分比？

我有我的 NVD3.js 子弹图的代码

nv.addGraph(function() {
    var chart = nv.models.bulletChart();

    chart.tooltip.valueFormatter(function(d){
        return ''+ numberWithCommas(d)+''; //on hover show percentage and value
    });

    d3.select('#chart svg')
      .datum(data)
      .transition().duration(1000)
      .call(chart);

    return chart;
});

function numberWithCommas(x) {
   return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}

这是我的数据变量

var data = {
   measureLabels: ["Total Obligated"]
   measures:[0]
   rangeLabels:["Available Amount"]
   ranges:[28464000]
   subtitle:"CODE"
  title:"200000100003000"
}

我已经尝试添加此代码

chart.xAxis.tickFormat(function(d) {
        //return ranges * 100 / ranges
});

但是它说'tickFormat'不是一个函数。

Answer 1

好的，我知道如何更改它了，哈哈！

我添加了这段代码。

d3.selectAll('g.nv-tick').select('text').text(function (t) {
    return (100 * t / data.ranges[0]).toFixed();
});

我弄了半天才搞明白T_T

在 NVD3 中将 x 轴范围更改为子弹图的百分比

Change x-axis range to percent of bullet chart in NVD3

nvd3.js