function initializeElements()

in src/core/configurableTL.ts [544:695]

• 109 lines of code
• 14 McCabe index (conditional complexity)

function initializeElements(timeline_container, data, duration, width, height, unit_width, tl_representation, configurableTL) {
  const timeline_event_g = timeline_container.selectAll(".timeline_event_g")
    .data(data, function (d, idx) {
      return d && d.hasOwnProperty("id") ? d.id : idx;
    });

  /**
  ---------------------------------------------------------------------------------------
  EVENTS
  ---------------------------------------------------------------------------------------
  **/

  // add event containers
  timeline_event_g.exit().transition("timeline_event_remove")
    .style("opacity", 0)
    .duration(duration)
    .remove();

  /**
  ---------------------------------------------------------------------------------------
  EVENT ENTER
  ---------------------------------------------------------------------------------------
  **/

  // define each event and its behaviour
  var timeline_event_g_enter = timeline_event_g.enter()
    .append("g")
    .attr("class", "timeline_event_g")
    .attr("id", d => `event_g${d.event_id}`);

  // define event behaviour
  timeline_event_g_enter
    .on("click", function (d, i) {
      if (!globals.playback_mode) {
        return eventClickListener(tl_representation, unit_width, configurableTL, d);
      }
    })
    .on("mouseover", function (d) {
      return eventMouseOverListener(d, tl_representation, unit_width, configurableTL);
    })
    .on("mouseout", eventMouseOutListener);

  // add rect events for linear timelines
  timeline_event_g_enter.append("rect")
    .attr("class", "event_span")
    .attr("height", unit_width)
    .attr("width", unit_width)
    .attr("y", height / 2)
    .attr("x", width / 2)
    .style("stroke", "#fff")
    .style("opacity", 0)
    .style("fill", eventColorMapping);

  // draw elapsed time as bar below the sequence, offset between events
  timeline_event_g_enter.append("rect")
    .attr("class", "time_elapsed")
    .attr("height", 0)
    .attr("width", unit_width * 1.5)
    .attr("y", height / 2)
    .attr("x", width / 2)
    .append("title")
    .style("opacity", 0)
    .text("");

  // add arc path events for radial timelines
  timeline_event_g_enter.append("path")
    .attr("class", "event_span")
    .style("stroke", "#fff")
    .style("opacity", 1)
    .style("fill", eventColorMapping);

  /**
  ---------------------------------------------------------------------------------------
  EVENT SPANS for SEGMENTED layouts
  ---------------------------------------------------------------------------------------
  span enter
  ---------------------------------------------------------------------------------------
  **/
  var event_span = timeline_event_g_enter.selectAll(".event_span_component")
    .data(function (d) {
      let dateTimes;
      switch (globals.segment_granularity) {
      case "days":
        dateTimes = time.utcHour.range(time.utcHour.floor(d.start_date), time.utcHour.ceil(d.end_date));
        break;
      case "weeks":
        dateTimes = time.day.range(time.day.floor(d.start_date), time.day.ceil(d.end_date));
        break;
      case "months":
        dateTimes = time.day.range(time.day.floor(d.start_date), time.day.ceil(d.end_date));
        break;
      case "years":
        dateTimes = time.utcWeek.range(time.utcWeek.floor(d.start_date), time.utcWeek.ceil(d.end_date));
        break;
      case "decades":
        dateTimes = time.month.range(time.month.floor(d.start_date), time.month.ceil(d.end_date));
        break;
      case "centuries":
        dateTimes = d3.range(d.start_date.getUTCFullYear(), d.end_date.getUTCFullYear());
        break;
      case "millenia":
        dateTimes = d3.range(d.start_date.getUTCFullYear(), d.end_date.getUTCFullYear() + 1, 10);
        break;
      case "epochs":
        dateTimes = [d.start_date];
        break;
      default:
        break;
      }
      return dateTimes ? dateTimes.map(function (dateTime) {
        return {
          dateTime,
          event_id: d.event_id
        };
      }) : undefined;
    }, function (d) {
      return d && (d.event_id + d.dateTime);
    })
    .enter();

  event_span.append("rect")
    .attr("class", "event_span_component")
    .style("opacity", 0)
    .style("fill", eventSpanColorMapping)
    .attr("height", unit_width)
    .attr("width", unit_width)
    .attr("y", height / 2)
    .attr("x", width / 2);

  event_span.append("path")
    .attr("class", "event_span_component")
    .style("opacity", 0)
    .style("fill", eventSpanColorMapping);

  /**
  ---------------------------------------------------------------------------------------
  terminal span indicators for segmented layouts
  ---------------------------------------------------------------------------------------
  **/

  // add right-facing triangle path to indicate beginning of span
  timeline_event_g_enter.append("path")
    .attr("class", "path_end_indicator")
    .style("opacity", 0)
    .attr("d", d3.svg.symbol()
      .type("triangle-up")
      .size(unit_width * 1.5)
    )
    .style("display", "none");

  return timeline_event_g;
}