Method draw

js/src/Lines.ts:652–706

(animate)

  }

  draw(animate): void {
    this.set_ranges();
    const curvesSel = this.d3el.selectAll('.curve').data(this.model.mark_data);

    const yScale = this.scales.y;

    const newCurves = curvesSel.enter().append('g').attr('class', 'curve');
    newCurves
      .append('path')
      .attr('class', 'line')
      .attr('fill', 'none')
      .attr('id', (d, i) => 'curve' + (i + 1))
      .on('click', () => {
        this.event_dispatcher('element_clicked');
      });
    newCurves.append('path').attr('class', 'area');
    newCurves
      .append('text')
      .attr('class', 'curve_label')
      .attr('x', 3)
      .attr('dy', '.35em')
      .attr(
        'display',
        this.model.get('labels_visibility') !== 'label' ? 'none' : 'inline'
      )
      .text((d: any) => d.name);

    const fill = this.model.get('fill'),
      area = fill === 'top' || fill === 'bottom' || fill === 'between';

    this.draw_dots();

    this.line = d3
      .line()
      .curve(this.get_interpolation())
      .defined((d: any) => {
        return d.y !== null && isFinite(yScale.scale(d.y));
      });

    this.area = d3
      .area()
      .curve(this.get_interpolation())
      .defined((d: any) => {
        return area && d.y !== null && isFinite(yScale.scale(d.y));
      });

    // Having a transition on exit is complicated. Please refer to
    // Scatter.js for detailed explanation.
    curvesSel.exit().remove();
    this.update_line_xy(animate);
    this.update_style();

    // alter the display only if a few of the curves are visible
    this.update_curves_subset();
  }

  draw_dots(): void {
    if (this.model.get('marker')) {