Method draw_legend

js/src/Lines.ts:358–459

(elem, xDisp, yDisp, interXDisp, interYDisp: number)

  }

  draw_legend(elem, xDisp, yDisp, interXDisp, interYDisp: number): number[] {
    const curveLabels = this.model.get_labels();
    const legendData = this.model.mark_data.map((d) => {
      return { index: d.index, name: d.name, color: d.color };
    });
    this.legendEl = elem.selectAll('.legend' + this.uuid).data(legendData);

    const rectDim = interYDisp * 0.8,
      fillColors = this.model.get('fill_colors');

    this.legendLine = d3
      .line()
      .curve(this.get_interpolation())
      .x((d) => {
        return d[0];
      })
      .y((d) => {
        return d[1];
      });

    this.legendPathData = [
      [0, rectDim],
      [rectDim / 2, 0],
      [rectDim, rectDim / 2],
    ];

    const legend = this.legendEl
      .enter()
      .append('g')
      .attr('class', 'legend' + this.uuid)
      .attr('transform', (d, i) => {
        return 'translate(0, ' + (i * interYDisp + yDisp) + ')';
      })
      .on(
        'mouseover',
        _.bind(() => {
          this.event_dispatcher('legend_mouse_over');
        }, this)
      )
      .on(
        'mouseout',
        _.bind(() => {
          this.event_dispatcher('legend_mouse_out');
        }, this)
      )
      .on(
        'click',
        _.bind(() => {
          this.event_dispatcher('legend_clicked');
        }, this)
      );

    legend
      .append('path')
      .attr('class', 'line')
      .attr('fill', 'none')
      .attr('d', this.legendLine(this.legendPathData) + this.path_closure())
      .style('stroke', (d, i) => {