function configureFacets()

in src/core/configurableTL.ts [1243:1355]


function configureFacets(timeline_container, duration, width, height, tl_layout, tl_representation, tl_scale, unit_width) {
  const timeline_facet = timeline_container.selectAll(".timeline_facet")
    .data(globals.facets.domain());

  const timeline_facet_exit = timeline_facet.exit().transition("timeline_facet_exit")
    .duration(duration)
    .remove();

  let facet_number = 0;

  // define each facet and its rect container
  const timeline_facet_enter = timeline_facet.enter()
    .append("g")
    .attr("class", "timeline_facet")
    .each(insertFacetAtAxis);

  // update facet container dimensions
  const timeline_facet_update = timeline_facet.transition("timeline_facet_update")
    .duration(duration);

  timeline_facet_enter.append("rect")
    .attr("class", "timeline_facet_frame")
    .attr("width", d3.max([0, width]))
    .attr("height", 0);

  timeline_facet_enter.append("title")
    .text("");

  // print the name of each facet
  timeline_facet_enter.append("text")
    .attr("class", "facet_title")
    .attr("dy", "-0.5em")
    .style("text-anchor", "middle")
    .text(d => getFacetTitleText(tl_layout, tl_representation, height, d))
    .attr("transform", "translate(0,0)rotate(0)");

  timeline_facet_update.select("title")
    .text(d => d);

  timeline_facet_update.select(".timeline_facet_frame")
    .attr("width", d3.max([0, width]))
    .attr("height", () => {
      if (tl_layout === "Faceted" && tl_representation === "Linear") {
        return d3.max([0, height / globals.num_facets]);
      }
      return 0;
    })
    .attr("transform", function () {
      var offset_x,
        offset_y;

      if (tl_layout !== "Faceted") {
        offset_x = width / 2;
        offset_y = height / 2;
      } else if (tl_representation === "Linear") {
        offset_x = 0;
        offset_y = facet_number * (height / globals.num_facets);
        facet_number++;
      } else if (tl_representation === "Radial" || (tl_representation === "Spiral" && tl_scale === "Sequential")) {
        offset_x = width / 2;
        offset_y = height / 2;
      } else {
        offset_x = width / 2;
        offset_y = height / 2;
      }
      return "translate(" + unNaN(offset_x) + "," + unNaN(offset_y) + ")";
    });

  timeline_facet_exit.select(".timeline_facet_frame")
    .attr("height", 0);

  facet_number = 0;

  timeline_facet_update.select("text.facet_title")
    .text(d => getFacetTitleText(tl_layout, tl_representation, height, d))
    .attr("transform", function () {
      var offset_x = 0,
        offset_y = 0,
        rotation = 0;
      if (tl_layout !== "Faceted") {
        offset_x = width / 2;
        offset_y = height / 2;
        rotation = 0;
      } else if (tl_representation === "Linear") {
        offset_x = 0;
        offset_y = facet_number * (height / globals.num_facets) + height / globals.num_facets / 2;
        rotation = 270;
        facet_number++;
      } else if (tl_representation === "Radial") {
        offset_x = facet_number % globals.num_facet_cols * (width / globals.num_facet_cols) + width / globals.num_facet_cols / 2;
        offset_y = Math.floor(facet_number / globals.num_facet_cols) * (height / globals.num_facet_rows) + globals.buffer + unit_width;
        rotation = 0;
        facet_number++;
      } else if (tl_representation === "Spiral" && tl_scale === "Sequential") {
        offset_x = facet_number % globals.num_facet_cols * (width / globals.num_facet_cols) + width / globals.num_facet_cols / 2;
        offset_y = Math.floor(facet_number / globals.num_facet_cols) * globals.spiral_dim + globals.buffer + unit_width;
        rotation = 0;
        facet_number++;
      } else {
        offset_x = width / 2;
        offset_y = height / 2;
        rotation = 0;
      }
      return "translate(" + unNaN(offset_x) + " ," + unNaN(offset_y) + ")rotate(" + unNaN(rotation) + ")";
    });

  timeline_facet_exit.select("text.facet_title")
    .attr("transform", "translate(" + (0 - width) + " ,0)");

  //logEvent("facet containers updated", "drawing");

  return { timeline_facet };
}