如何更改 JSXGraph 轴图中网格线的粗细？答案

【问题标题】：How can the thickness of gridlines in JSXGraph axis plots be changed?如何更改 JSXGraph 轴图中网格线的粗细？
【发布时间】：2020-04-22 07:45:46
【问题描述】：

在默认的板轴（例如https://jsfiddle.net/dr63zumf/1/）、屏幕截图和下面的代码中，如何更改网格线的粗细或宽度以使其更粗？文档中似乎没有此选项。

谢谢，

罗伯

const board = JXG.JSXGraph.initBoard('jxgbox', { 
    boundingbox: [-5, 5, 5, -5], axis:true
});

default grid layout

【问题讨论】：

标签： javascript jsxgraph

【解决方案1】：

回答 Rob 的评论：

minorTicks 和majorTicks 不可能有不同的宽度，因为在内部，一个轴的刻度元素是一个 SVG 路径。但是，有几种可能的解决方法：

1) 根本不显示minorTicks：

const board = JXG.JSXGraph.initBoard('jxgbox', { 
    boundingbox: [-5, 5, 5, -5], 
    axis:true,
    defaultAxes: {
      x: {
        ticks: {
            strokeWidth: 5,
            minorTicks: 0
        }
      },
      y: {
        ticks: {
           strokeWidth: 5,
           minorTicks: 0
        }
      }
    }
});

2) 如果您坚持使用次要刻度和主要刻度，则不要在默认轴的默认刻度中显示majorTicks，而是在默认轴上添加不带minorTicks 的粗刻度，见https://jsfiddle.net/vf3muqgn/1/:

  const board = JXG.JSXGraph.initBoard('jxgbox', { 
    boundingbox: [-5, 5, 5, -5], 
    axis:true,
    defaultAxes: {
        x: {
        ticks: {
          majorHeight: 0
        }
      },
        y: {
        ticks: {
          majorHeight: 0
        }
      }
    }
  });

  board.create('ticks', [board.defaultAxes.x], {
    strokeColor: '#cccccc',
    minorTicks: 0,
    majorHeight: -1,
    strokeWidth: 3
  });
  board.create('ticks', [board.defaultAxes.y], {
    strokeColor: '#cccccc',
    minorTicks: 0,
    majorHeight: -1,
    strokeWidth: 3
  });

【讨论】：

【解决方案2】：

这可以通过defaultAxes属性实现：

const board = JXG.JSXGraph.initBoard('jxgbox', { 
    boundingbox: [-5, 5, 5, -5], 
    axis:true,
    defaultAxes: {
        x: {
            ticks: {
                strokeWidth: 5
            }
        },
        y: {
            ticks: {
               strokeWidth: 5
            }
        }
    }
});

在https://jsfiddle.net/oucfp3ea/1/观看直播

【讨论】：

谢谢阿尔弗雷德！这几乎是完美的，但除了使主要网格线更粗（这是我需要的）之外，它还使中间的较小刻度线更粗，这看起来很奇怪。是否可以只使主要网格线更粗，而不是中间的小刻度线？