nvd3 tickValues() 不绘制接近边界值的刻度

Question

我正在使用 nvd3 绘制折线图并指定一组 xAxis 值来绘制刻度以供使用：

chart.xAxis.tickValues(tickArr)

其中 tickArr 具有绘制刻度的点列表。

由于某种原因，未绘制靠近 x 轴开始值或结束值的刻度。我猜这是因为边界值刻度的一些默认设置，但我无法找到一种方法来覆盖它并显示所有指定的刻度。

这是 link 到 fiddle 。你可以看到虽然 tickArr 有 7 个数据点，但只显示了 3 个刻度。

对于我应该更改哪个参数或为什么会发生这种情况的任何帮助，我们将不胜感激。

Answer 1

我修改了源代码以解决这种情况。在 nv.models.axis() 中，当 showMaxMin 对于 bottom/top 方向为真时，会给出一个缓冲区：

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));
 }

还有一个 post 在谈论类似的问题。那里发布的解决方案是删除边界刻度，但这似乎是错误的方法，因为在考虑可视化的感知方面时，边界刻度非常有用。希望这个回答对以后遇到类似情况的人有所帮助。

nvd3 tickValues() 不绘制接近边界值的刻度

nvd3 tickValues() not drawing ticks close to boundary values

javascript

nvd3.js