timelineView = function (timelineData, config) { config = { ...defaults, ...config }; const { timelineStart, timelineEnd, chartHeight, width, labelBoxHeight, labelBoxWidth, dateFormat, showEndTicks, showToday } = config; const margins = { top: Math.floor(chartHeight / 2), bottom: Math.floor(chartHeight / 2), left: 48, right: 48 }; const lineLength = 12; const w = width - margins.left - margins.right; const axisColor = "darkGrey"; const axisStrokeWidth = 6; const domain = [timelineStart, timelineEnd]; const range = [0, w]; const scale = d3.scaleTime(domain, range); const svg = html``; const svgSelection = d3.select(svg); const vis = svgSelection .append("g") .attr("transform", `translate(${margins.left}, ${margins.top})`); const offsetUnit = labelBoxHeight + 1; const maxOffset = margins.top - lineLength - labelBoxHeight; const timelineDataCopy = timelineData.slice(); if (showToday) { timelineDataCopy.push({ label: "TODAY", date: d3.timeDay(), type: "now" }); } timelineDataCopy.sort((a, b) => a.date - b.date); const yOffsets = timelineDataCopy.reduce((list, current) => { const leftEdge = scale(current.date) - labelBoxWidth / 2; const prevOffset = list.length ? list[list.length - 1] : null; let nextOffset = { leftEdge, offset: 0 }; if (prevOffset && prevOffset.leftEdge + labelBoxWidth > leftEdge) { let candidateNextOffset = prevOffset.offset + offsetUnit; if (candidateNextOffset > maxOffset) { nextOffset.offset = 0; } else { nextOffset.offset = candidateNextOffset; } } list.push(nextOffset); return list; }, []); // we render the events in reverse order to get the layering right, so need to reverse the offsets array yOffsets.reverse(); const axisFn = d3 .axisBottom(scale) .tickSize(axisStrokeWidth) .tickValues(showEndTicks ? domain : []) .tickFormat(dateFormat); // timeline axis const axis = vis.append("g").classed("timeline-axis", true); axis.call(axisFn); // Hide default axis line, using our own one axis.select(".domain").attr("display", "none"); axis .append("line") .attr("x0", 0) .attr("x1", (d) => scale.range()[1]) .attr("y0", 0) .attr("y1", 0) .attr("stroke-width", axisStrokeWidth) .attr("stroke", "darkGrey") .attr("marker-start", "url(#timelineCap)") .attr("marker-end", "url(#timelineCap)"); const eventDateOffset = 10; const events = vis .append("g") .selectAll("g") .data(timelineDataCopy.reverse()) .enter() .append("g") .attr("class", (d) => d.type) .attr("transform", (d) => `translate(${scale(d.date)}, 0)`); const lineLengthOffset = (d, i) => lineLength + yOffsets[i].offset; const lineLengthFixed = (d) => lineLength; const useLineLengthFixed = false; events .append("line") .classed("event-line", true) .attr("x1", 0) .attr("x2", 0) .attr("y1", useLineLengthFixed ? lineLengthFixed : lineLengthOffset) .attr("y2", (d, i) => -lineLength - yOffsets[i].offset) .attr("stroke-width", 1); events .append("text") .classed("event-date", true) .attr("x", 0) .attr("y", (d, i) => lineLength + yOffsets[i].offset + eventDateOffset) .attr("text-anchor", "middle") .text((d) => dateFormat(d.date)); events .append("foreignObject") .attr("x", 0) .attr("y", (d, i) => -lineLength - yOffsets[i].offset) .attr("width", labelBoxWidth) .attr("height", labelBoxHeight) .attr("transform", `translate(${-labelBoxWidth / 2}, ${-labelBoxHeight})`) .html( (d) => `

${d.label}

` ); return svg; }