Method draw_map

js/src/MarketMap.ts:455–609

()

  }

  draw_map() {
    this.reset_drawing_controls();
    // Removing pre existing elements from the map
    this.fig_map.selectAll('.element_group').remove();
    this.fig_names.selectAll('.names_object').remove();
    this.rect_groups = this.fig_map
      .selectAll('.element_group')
      .data(this.groups);
    const color_scale = this.scales.color;

    const that = this;
    this.rect_groups = this.rect_groups
      .enter()
      .append('g')
      .attr('class', 'element_group')
      .attr('transform', (d, i) => {
        return that.get_group_transform(i);
      })
      .merge(
        this.rect_groups as d3.Selection<
          SVGGElement,
          any,
          SVGGraphicsElement,
          any
        >
      );

    this.rect_groups.exit().remove();
    this.end_points = [];
    this.rect_groups.nodes().forEach((d, i) => {
      const data = that.grouped_data[that.groups[i]];
      const return_arr = that.get_new_cords();
      const ends = that.get_end_points(
        return_arr[2],
        data.length,
        return_arr[0],
        return_arr[1],
        return_arr[3],
        return_arr[4]
      );
      ends.forEach((point) => {
        that.end_points.push(point);
      });
      const element_count = that.running_sums[i];

      let groups = d3
        .select(d)
        .selectAll<SVGGElement, undefined>('.rect_element')
        .data(data);

      // Appending the <g> <rect> and <text> elements to the newly
      // added nodes
      const new_groups = groups
        .enter()
        .append('g')
        .classed('rect_element', true);

      new_groups