当有限数量的日期时,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'
}
];
}`
如果您的屏幕足够宽,您将看到重复的日期.如果你打开窗户,问题就会消失.
解决方法
这个问题与屏幕大小无关,因为它可能也会出现这样的情况：你只有3天的显示,而不是3个滴答你会得到6或10或任何(实际上,这正是你的情况,如果我看看你的jsfiddle).这是真的,nvd3使用这样的东西来设置ticks的尺寸(看看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,并用值覆盖值.
