Function render

js/src/ScatterBase.ts:27–90

()

export abstract class ScatterBase extends Mark {
  render() {
    const base_creation_promise = super.render();

    const that = this;
    // Warning: arrow functions actually breaks the drag
    this.drag_listener = d3
      .drag()
      .subject((d: any) => {
        return { x: that.x_scale.scale(d.x), y: that.y_scale.scale(d.y) };
      })
      .on('start', function (d, i) {
        return that.drag_start(d, i, this);
      })
      .on('drag', function (d, i) {
        return that.on_drag(d, i, this);
      })
      .on('end', function (d, i) {
        return that.drag_ended(d, i, this);
      });

    this.selected_style = this.model.get('selected_style');
    this.unselected_style = this.model.get('unselected_style');
    this.selected_indices = this.model.get('selected');

    this.hovered_style = this.model.get('hovered_style');
    this.unhovered_style = this.model.get('unhovered_style');
    this.hovered_index = !this.model.get('hovered_point')
      ? null
      : [this.model.get('hovered_point')];

    this.display_el_classes = ['dot', 'legendtext']; //FIXME
    this.event_metadata = {
      mouse_over: {
        msg_name: 'hover',
        lookup_data: false,
        hit_test: true,
      },
      legend_clicked: {
        msg_name: 'legend_click',
        hit_test: true,
      },
      element_clicked: {
        msg_name: 'element_click',
        lookup_data: false,
        hit_test: true,
      },
      parent_clicked: {
        msg_name: 'background_click',
        hit_test: false,
      },
    };
    this.displayed.then(() => {
      this.parent.tooltip_div.node().appendChild(this.tooltip_div.node());
      this.create_tooltip();
    });

    return base_creation_promise.then(() => {
      this.event_listeners = {};