我在这里使用NVD3显示折线图:http://jsbin.com/xodaxafiti/2/edit?js,output
但似乎NVD3在XAxis上自动隐藏了一些tickLabel,但只有那些靠近边缘的刻度线,即2-3Oct和27-28Oct(除了第一个和最后一个刻度线)。我知道这是一个自动缩减,因为当我增加图表的宽度时,刻度开始显示。但是我发现这种减少行为很奇怪,而且lineChart没有像multiBarChart这样的reduceXTicks选项。
我希望能够像this一样自己控制还原行为:
var chart = nv.models.lineChart()
.useInteractiveGuideline(true)
.margin({left: 80,top: 20,bottom: 120,right: 20});
chart.xAxis.ticks(function() {
return data[0].map(chart.x()).filter(function(d,i) {
i % Math.ceil(data[0].values.length / (availableWidth / 100)) === 0;
})
})
但它没有用。任何人都知道如何控制它?
答案 0 :(得分:16)
还原行为有效,因为默认情况下showMaxMin
设置为true。添加.showMaxMin(false)
可解决问题:
chart.xAxis.axisLabel("XAxisLabel")
.showMaxMin(false)
.tickValues(tickvalues)
.tickFormat(function (d) {
return tickformat[d];
})
;
答案 1 :(得分:0)
如果您希望边界刻度和刻度接近边界(MaxMin)值,您可以修改源。
在nv.models.axis()中,当showMaxMin为底部/顶部方向为true时,会给出一个缓冲区:
if (showMaxMin && (axis.orient() === 'top' || axis.orient() === 'bottom')) {
var maxMinRange = [];
wrap.selectAll('g.nv-axisMaxMin')
.each(function(d,i) {
try {
if (i) // i== 1, max position
maxMinRange.push(scale(d) - this.getBoundingClientRect().width - 4); //assuming the max and min labels are as wide as the next tick (with an extra 4 pixels just in case)
else // i==0, min position
maxMinRange.push(scale(d) + this.getBoundingClientRect().width + 4)
}catch (err) {
if (i) // i== 1, max position
maxMinRange.push(scale(d) - 4); //assuming the max and min labels are as wide as the next tick (with an extra 4 pixels just in case)
else // i==0, min position
maxMinRange.push(scale(d) + 4);
}
});
// the g's wrapping each tick
g.selectAll('g').each(function(d, i) {
if (scale(d) < maxMinRange[0] || scale(d) > maxMinRange[1]) {
if (d > 1e-10 || d < -1e-10) // accounts for minor floating point errors... though could be problematic if the scale is EXTREMELY SMALL
d3.select(this).remove();
else
d3.select(this).select('text').remove(); // Don't remove the ZERO line!!
}
});
}
我刚删除了这些缓冲区:
try {
if (i) // i== 1, max position
maxMinRange.push(scale(d));
else // i==0, min position
maxMinRange.push(scale(d))
}catch (err) {
if (i) // i== 1, max position
maxMinRange.push(scale(d));
else // i==0, min position
maxMinRange.push(scale(d));
}