NVD3 折线图 X 轴刻度丢失答案

【问题标题】：NVD3 Line Chart X Axis Ticks Are MissingNVD3 折线图 X 轴刻度丢失
【发布时间】：2014-12-24 19:23:21
【问题描述】：

我在这里使用 NVD3 显示折线图：http://jsbin.com/xodaxafiti/2/edit?js,output

但似乎 NVD3 会自动隐藏 XAxis 上的一些刻度标签，但只有边缘附近的刻度，即 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;
   })
})

但它没有用。有人知道如何控制吗？

【问题讨论】：

使用.tickValues() 而不是.ticks()。
我之前尝试过使用.tickFormat()，但它在上面缺少的tickLabels 之上给了我一个过滤器。此外，使用此技巧时，隐藏标签甚至不会显示在工具提示中。我相信tickValues() 会有同样的结果。
嗯，我会为 x 轴使用时间刻度——这应该可以让您更好地控制显示的内容。 This question 应该对此有所帮助。

标签： javascript d3.js nvd3.js linechart

【解决方案1】：

减少行为有效，因为 showMaxMin 默认设置为 true。添加.showMaxMin(false) 可以解决问题：

chart.xAxis.axisLabel("XAxisLabel")
    .showMaxMin(false)    
    .tickValues(tickvalues)        
    .tickFormat(function (d) {
      return tickformat[d];
      })
;

【讨论】：

请注意，您没有任何超出范围的刻度值，否则它们将出现在 y 轴的左侧。你也可以使用xDomain来设置xAxis的范围

【解决方案2】：

如果您希望同时拥有边界刻度和靠近边界（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));
 }

【讨论】：