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 };
}