Function draw

js/src/ScatterBase.ts:310–345

(animate?)

  }

  draw(animate?) {
    this.set_ranges();

    const elements = this.d3el
      .selectAll('.object_grp')
      .data(this.model.mark_data, (d: any) => {
        return d.unique_id;
      });

    const elements_added = elements
      .enter()
      .append('g')
      .attr('class', 'object_grp');

    this.update_position(animate);

    this.set_drag_behavior();
    elements_added.on('click', (d, i) => {
      this.event_dispatcher('element_clicked', { data: d, index: i });
    });
    elements_added.on('mouseover', (d, i) => {
      this.scatter_hover_handler({ data: d, index: i });
    });
    elements_added.on('mouseout', () => {
      this.reset_hover_points();
    });

    this.draw_elements(animate, elements_added);

    // Removed the transition on exit as it was causing issues.
    // Elements are not removed until the transition is complete and
    // hence the setting styles function doesn't behave as intended.
    // The only way to call the function after all of the elements are
    // removed is round-about and doesn't look very nice visually.
    elements.exit().remove();
  }

  draw_elements(animate, elements_added) {}