Method update_grid_lines

js/src/Axis.ts:605–654

(animate?: boolean)

  }

  update_grid_lines(animate?: boolean) {
    const grid_type = this.model.get('grid_lines');
    const side = this.model.get('side');
    const is_vertical = ['left', 'right'].includes(side);
    const animation_duration =
      animate === true ? this.parent.model.get('animation_duration') : 0;

    let tickSize = is_vertical ? -this.width : -this.height;
    let tickOffset = 0;

    //apply offsets if applicable
    if (this.offset_scale) {
      const offset = this.offset_scale.scale(this.offset_value);

      if (side === 'bottom' || side == 'right') {
        tickSize = -offset;
        tickOffset = !is_vertical ? this.height - offset : this.width - offset;
      } else {
        tickSize += offset;
        tickOffset = -offset;
      }
    }

    if (grid_type !== 'none') {
      this.axis.tickSizeInner(tickSize).tickSizeOuter(6);
    } else {
      this.axis.tickSize(6);
    }

    this.g_axisline.selectAll('.tick').classed('short', grid_type === 'none');

    this.g_axisline
      .transition('update_grid_lines')
      .duration(animation_duration)
      .call(this.axis)
      .selectAll('.tick line')
      .attr(
        !is_vertical ? 'y1' : 'x1',
        this.offset_scale && grid_type !== 'none' ? tickOffset : null
      )
      .style('stroke-dasharray', grid_type === 'dashed' ? '5, 5' : null);

    this.apply_tick_styling();

    if (this.model.get('grid_color')) {
      this.g_axisline
        .selectAll('.tick line')
        .style('stroke', this.model.get('grid_color'));
    }
  }

  update_color() {
    if (this.model.get('color')) {