Как можно изменить толщину линий сетки на осевых графиках JSXGraph?

В осях доски по умолчанию (например, https://jsfiddle.net/dr63zumf/1/) , снимок экрана и код ниже, как изменить толщину или ширину линий сетки, чтобы сделать их толще? Кажется, в документации нет такой возможности.

Спасибо,

Роб

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

сетка по умолчанию


person Rob    schedule 22.04.2020    source источник


Ответы (2)


Отвечая на комментарий Роба:

Невозможно иметь разную ширину для 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
  });
person Alfred Wassermann    schedule 28.04.2020

Это можно реализовать с помощью атрибута 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/.

person Alfred Wassermann    schedule 22.04.2020
comment
Спасибо Альфред! Это почти идеально, но помимо того, что основные линии сетки становятся толще (что мне и нужно), это также делает более толстыми меньшие деления между ними, что выглядит странно. Можно ли просто сделать основные линии сетки толще, а не маленькие деления между ними? - person Rob; 27.04.2020