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

nvd3 tickValues() not drawing ticks close to boundary values

本文关键字：边界 靠近 绘制 tickValues nvd3      更新时间：2023-09-26

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

chart.xAxis.tickValues(tickArr)

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

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

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

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

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

有另一个帖子讨论了类似的问题。张贴的解决方案是删除边界刻度，但这似乎是错误的方法，因为边界刻度在考虑可视化的感知方面非常有帮助。

我希望这个答案能帮助到将来遇到类似情况的人。
相关文章：