Method initialize

js/src/Figure.ts:48–102

()

export class Figure extends DOMWidgetView {
  initialize() {
    this.debouncedRelayout = _.debounce(() => {
      this.relayout();
    }, 300);
    this.debouncedUpdateDecorators = _.debounce(() => {
      this.updateDecorators();
    }, 100);
    // Internet Explorer does not support classList for svg elements
    this.el.classList.add('bqplot');
    this.el.classList.add('figure');
    this.el.classList.add('jupyter-widgets');
    this.change_theme();

    const svg = document.createElementNS(
      d3.namespaces.svg,
      'svg'
    ) as SVGElement;
    svg.classList.add('svg-figure');
    this.svg = d3.select<SVGElement, any>(svg);

    const svg_background = document.createElementNS(
      d3.namespaces.svg,
      'svg'
    ) as SVGElement;
    svg_background.classList.add('svg-background');
    this.svg_background = d3.select<SVGElement, any>(svg_background);

    this.el.appendChild(svg_background);
    this.el.appendChild(svg);

    this.intersectObserver = new IntersectionObserver(
      (entries: IntersectionObserverEntry[]) => {
        if (entries[entries.length - 1].isIntersecting) {
          this.visible = true;
          this.debouncedRelayout();
        } else if (entries[entries.length - 1].rootBounds != null) {
          /* When 'rootBounds' is null, 'isIntersecting' is 'false', but the plot is visible, so only change 'visible'
           * if rootBonds is set. I can't find any info on this behaviour. */
          this.visible = false;
        }
      },
      { threshold: 0 }
    );
    this.intersectObserver.observe(this.el);

    this.resizeObserver = new ResizeObserver(
      (entries: ResizeObserverEntry[]) => {
        this.debouncedRelayout();
      }
    );

    this.resizeObserver.observe(this.el);

    super.initialize.apply(this, arguments);
  }

  protected getFigureSize(): IFigureSize {
    const domSize: IFigureSize = this.el.getBoundingClientRect();