nvd3 tickValues() 未绘制接近边界值的刻度答案

【问题标题】：nvd3 tickValues() not drawing ticks close to boundary valuesnvd3 tickValues() 未绘制接近边界值的刻度
【发布时间】：2015-07-21 01:52:04
【问题描述】：

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

chart.xAxis.tickValues(tickArr)

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

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

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

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

【问题讨论】：

首先检查您的数据点值，然后使用线性或对数比例检查您的比例，分享您当前的代码
用小提琴更新了问题

标签： javascript nvd3.js

【解决方案1】：

我修改了源代码来解决这种情况。在 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));
 }

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

【讨论】：