Question

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

chart.xAxis.tickValues(tickArr)

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

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

以下是fiddle的链接。你可以看到虽然tickArr有7个数据点，但只显示了3个滴答。

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

Answer 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在谈论类似的问题。在那里发布的解决方案是删除边界刻度，但这似乎是错误的方法，因为在考虑可视化的感知方面时，边界刻度非常有用。我希望这个答案可以帮助将来面临类似情况的人。

nvd3 tickValues（）没有绘制接近边界值的刻度线

1 个答案: