Question

我试图设置一个折线图nvd3图形，但我在x轴上得到的时间值没有垂直对齐，继承代码：

function fillData() {

var test1 = [],
    test2 = [],
    test3 = [];

var now =  new Date(),
   day = 1000*60*60*24;

var cont = 0;

for (var i = now - 9*day; i < now; i+=day)
{

    var arr = [400,431,401,430,429,450,448,498,421,421];
    var arr1 = [420,415,421,410,439,430,468,448,441,421];
    var arr2 = [410,425,431,420,459,420,458,438,451,421];

    test1.push({x: i, y: arr[cont]});
    test2.push({x: i, y: arr1[cont]});
    test3.push({x: i, y: arr2[cont]});
    cont+=1;

} // fin for

return [
    {
      values: test1,
      area: true,
      key: 'test1',
      color: '#81BA63'
    },
    {
      values: test2,
      area: true,
      key: 'test2',
      color: '#EAEAEA'
    },
    {
      values: test3,
      area: true,
      key: 'test3',
      color: '#6389BA'
    }
  ];
}

nv.addGraph(function() {
var chart = nv.models.lineChart()

    .margin({top: 0, bottom: 25, left: 45, right: 0})
    .showLegend(true)
    .forceY([300,500])

chart.yAxis
    .showMaxMin(true)
    .tickFormat(d3.format('.02'))

chart.xAxis
    .showMaxMin(false)
    .tickFormat(function(d) { return d3.time.format('%d - %b')(new Date(d)) });
     chart.xScale(d3.time.scale());


d3.select('#sources-chart-line svg')
    .datum(fillData())
    .transition().duration(500)
    .call(chart);

nv.utils.windowResize(chart.update);

return chart;
});

问题截图：http://oi57.tinypic.com/i6gq2t.jpg

先谢谢!!

Answer 1

问题是数据点（9）和轴刻度（8）的数量不同。 D3选择比例的“代表性”刻度，这些刻度不一定与数据点对齐。因此，您可以获得日期仍然正确的数据点之间的刻度，但不会像数据点那样在午夜时间点。

解决此问题的一种方法是明确指定刻度值：

var data = fillData();
chart.xAxis
  .tickValues(data[0].values.map(function(d) { return d.x; }));

这有点难看，但它显示了原理，您可以重构代码以使这些值更易于访问。

NVD3 x轴时间刻度未对齐

1 个答案: