javascript NVD3 折线图 X 轴刻度丢失
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26624430/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
NVD3 Line Chart X Axis Ticks Are Missing
提问by yonasstephen
I am using NVD3 to display line chart here: http://jsbin.com/xodaxafiti/2/edit?js,output
我使用 NVD3 在此处显示折线图：http://jsbin.com/xodaxafiti/2/edit?js,output
But it seems like NVD3 auto-hide some tickLabels on XAxis, but only those ticks near the edge, i.e. 2-3Oct and 27-28Oct (except the first and last tick). I know that this is an auto-reduce because when I increase the width of chart, the ticks start to show up. However I find that this reducing behaviour weird, and the lineChart does not have reduceXTicks option like multiBarChart.
但似乎 NVD3 会自动隐藏 XAxis 上的一些刻度标签，但只隐藏边缘附近的刻度，即 2-3Oct 和 27-28Oct（第一个和最后一个刻度除外）。我知道这是一个自动缩小，因为当我增加图表的宽度时，刻度开始出现。但是我发现这种减少行为很奇怪，并且 lineChart 没有像 multiBarChart 这样的 reduceXTicks 选项。
I want to be able to control the reducing behaviour myself like 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;
})
})
But it didn't work. Anyone has any idea how to control this?
但它没有用。任何人都知道如何控制这个？
回答by Osman Mazinov
The reducing behavior works because the showMaxMinset to true by default. Adding .showMaxMin(false)fixes the problem:
减少行为有效，因为showMaxMin默认情况下设置为 true。添加.showMaxMin(false)解决了问题：
chart.xAxis.axisLabel("XAxisLabel")
.showMaxMin(false)
.tickValues(tickvalues)
.tickFormat(function (d) {
return tickformat[d];
})
;
回答by arjun010
In case you want to have both the boundary ticks and the ticks close to the boundary(MaxMin) values, you can modify the source.
如果您想要边界刻度和接近边界 (MaxMin) 值的刻度，您可以修改源。
In the nv.models.axis(), there is a buffer given when showMaxMin is true for a bottom/top orientation:
在 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!!
}
});
}
I just removed these buffers:
我刚刚删除了这些缓冲区：
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));
}
