Public
Edited
Dec 3
1 star
// detects if
// A: he box is outside the SVG
// B: a box overlaps with a label within the accumulator
detectOverlap = (labelArray, svgBox, spacer = 0) => {
const newArray = labelArray.reduce((acc, currentLabel) => {
const svg = {
boundingBox: svgBox,
position: { x: 0, y: 0 }
};
const isInside = hasCanvasBoxOverlap(svg, currentLabel, spacer);
if (!isInside) {
currentLabel.overlap = {
hide: true,
conflict: "outside",
conflictIds: -1
};
return acc;
}
// If inside, check overlaps
const overlappingObjects = acc.filter((existingLabel) =>
hasBoundingBoxOverlap(existingLabel, currentLabel, spacer)
);
const overlapFound = overlappingObjects.length > 0;
currentLabel.overlap = {
hide: overlapFound,
conflict: overlapFound ? "overlap" : "none",
conflictIds: overlappingObjects.map((d) => d.text)
};
if (!overlapFound) acc.push(currentLabel);
return acc;
}, []);
}
Corners of the bounding box
Returns x1, x2, y1, y2 of a bounding box (depending on the anchor)
metricScale = d3.scaleLinear().range(metricExtent).domain([0, 1])
fontSizeScale = d3.scaleLinear().range([minFontSize, maxFontSize]).domain(metricExtent)
fontSizeScale(300)
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
