如何在NVD3中更改XT​​ick格式?

时间:2013-01-27 20:51:43

标签: javascript d3.js nvd3.js

我想将小图表的XTick格式更改为日期。我从this example解除了以下内容:

function chart(div)
{
var testdata = loadData();
nv.addGraph(function() {

    var chart = nv.models.lineWithFocusChart();

    chart.xAxis.tickFormat(function(d) {
       var dx = testdata[0].values[d] && testdata[0].values[d].x || 0;
       return d3.time.format('%x')(new Date(dx))
     });

    chart.yAxis
        .tickFormat(d3.format(',.2f'));

   chart.y2Axis
       .tickFormat(d3.format(',.2f'));

   d3.select(div + ' svg')
       .datum(loadData())
     .transition().duration(500)
       .call(chart);

   nv.utils.windowResize(chart.update);

   return chart;
 });
 }

但只有大图表的格式更改为日期。

1 个答案:

答案 0 :(得分:1)

有两种方法可以修复第二个x轴的刻度。

第一种方法是明确为第二轴设置tickFormat。这种设计遵循传统的一次设置一个属性的范例。

var xFormat = function(d) {
   var dx = testdata[0].values[d] && testdata[0].values[d].x || 0;
   return d3.time.format('%x')(new Date(dx));
};

chart.xAxis.tickFormat(xFormat);
chart.xAxis2.tickFormat(xFormat);

第二种方法是避免代码重复,它使用chart API公开的特殊函数将轴设置在一起:

// This would set both the axis simultaneously
chart.xTickFormat(xFormat);

此功能出现在代码(introduced here)中,正是出于此目的。但是,由于API不是很稳定,可能会在以后删除。