javascript - 如何更改 JSXGraph 轴图中网格线的粗细？

Question

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

谢谢，

抢

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

默认网格布局

Answer 1

This can be realized with the attribute defaultAxes:

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

See it live at https://jsfiddle.net/oucfp3ea/1/

Answer 2

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