当我在nvd3图表上有少量日期时,如何防止刻度标记重复出现

Question

x轴喜欢在日期有限的情况下重复日期.请看这个小提琴:

http://jsfiddle.net/skilesare/bFfJ2/1/

nv.addGraph(function() {  

    var data = fakeActivityByDate();

    var chart = nv.models.lineChart();




chart.xAxis
       .axisLabel('Date')
       .rotateLabels(-45)
       .tickFormat(function(d) { return d3.time.format('%b %d')(new Date(d)); });

   chart.yAxis
       .axisLabel('Activity')
       .tickFormat(d3.format('d'));

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

   nv.utils.windowResize(function() { d3.select('#chart svg').call(chart) });

   return chart;
 });

function days(num) {
  return num*60*60*1000*24
}
 /**************************************
  * Simple test data generator
  */

function fakeActivityByDate() {
   var lineData = [];
   var y=0;
   var start_date = new Date() - days(365); // one year ago

   for (var i = 0; i < 4; i++) {
     lineData.push({x: new Date(start_date + days(i)), y: y});
     y=y+Math.floor((Math.random()*10)-3);
   }

   return [
     {
       values: lineData,
       key: 'Activity',
       color: '#ff7f0e'
     }
   ];
 }`

如果您的屏幕足够宽,您将看到重复的日期.如果你对窗口进行平铺,问题就会消失.

Answer 1

这个问题与屏幕尺寸无关,因为它也可能出现在这样的情况下:你只有3天的时间来显示,而不是3个刻度,你会得到6或10或其他(实际上,如果我是你的情况就是如此)看看你的jsfiddle).确实,nvd3使用这样的东西来设置刻度的尺寸(看看axis.js):

if (ticks !== null)
    axis.ticks(ticks);
 else if (axis.orient() == 'top' || axis.orient() == 'bottom')
    axis.ticks(Math.abs(scale.range()[1] - scale.range()[0]) / 100);

这个问题有几种解决方案:

• 您要么实现自己的轴组件并替换nvd3的轴

• 你可以直接修改nvd3的轴组件,并添加一些设置,然后专门用于你正在描述的场景(你会注意到,因为它是高度可定制的nvd3).

• Hack:你使用d3自己的tickValues()并传递一个数组,其中包含你想要在屏幕上显示的日期(例如:第一个日期,最后一个日期以及算法计算的几个日期).请参阅d3的文档:https://github.com/mbostock/d3/wiki/SVG-Axes#wiki-tickValues.根据情况(您要修改哪个轴和哪个图表),您不仅需要注释我粘贴的代码并添加用于将tickValues设置为图表组件的算法(例如lineChart),而且还需要添加tickValues的setter并用您的值覆盖值.