Method draw

js/src/Bars.ts:275–356

(animate?: boolean)

  }

  draw(animate?: boolean) {
    this.set_ranges();
    let barGroups: d3.Selection<any, any, any, any> = this.d3el
      .selectAll('.bargroup')
      .data(this.model.mark_data, (d: any) => d.key);

    // this.stackedScale is the ordinal scale used to draw the bars. If a linear
    // scale is given, then the ordinal scale is created from the
    // linear scale.
    if (!isOrdinalScale(this.domScale)) {
      const modelDomain = this.model.mark_data.map((elem) => elem.key);
      this.stackedScale.domain(modelDomain);
    } else {
      this.stackedScale.domain(this.domScale.scale.domain());
    }

    this.updateInternalScales();

    if (this.model.mark_data.length > 0) {
      this.groupedScale
        .domain(_.range(this.model.mark_data[0].values.length))
        .rangeRound([0, Math.round(this.stackedScale.bandwidth() * 100) / 100]);
    }

    // Since we will assign the enter and update selection of barGroups to
    // itself, we may remove exit selection first.
    barGroups.exit().remove();

    barGroups = barGroups
      .enter()
      .append('g')
      .attr('class', 'bargroup')
      .merge(barGroups);
    // The below function sorts the DOM elements so that the order of
    // the DOM elements matches the order of the data they are bound
    // to. This is required to maintain integrity with selection.
    barGroups.order();

    barGroups.on('click', (d, i) => {
      return this.event_dispatcher('element_clicked', { data: d, index: i });
    });

    const barsSel = barGroups.selectAll('.bar').data((d) => d.values);

    // default values for width and height are to ensure smooth
    // transitions
    barsSel
      .enter()
      .append('rect')
      .attr('class', 'bar')
      .attr('width', 0)
      .attr('height', 0);

    barsSel.exit().remove();

    if (!this.model.get('label_display')) {
      barGroups.selectAll('text').remove();
    }