dot = (
{
w,
pan = {h: 0, v: 0},
padding = 9,
lineHeight = 1.5,
fontFamily = "sans-serif",
fontSize = 10,
fontWeight = 900,
fontColor = "white",
primer = "black",
borderRadius,
},
text
) =>
(g) =>
{
const r = w - 2 * padding;
const style = `
.box {
display: inline-flex;
height: ${r}px;
width: ${r}px;
padding: ${padding}px;
align-items: center;
justify-content: center;
color: ${fontColor};
font-family: ${fontFamily}, sans-serif;
font-size: ${fontSize}px;
font-weight: ${fontWeight};
line-height: ${lineHeight};
}
`;
g
.append("style")
.html(style)
;
const h = w/2;
const o = g
.append("svg")
.attr("width", w)
.attr("height", w)
.attr("viewBox", [-h, -h, w, w])
.attr("x", w * (pan.h - .5))
.attr("y", w * (pan.v - .5))
.attr("overflow", "visible")
;
o
.append("rect")
.attr("width", "100%")
.attr("height", "100%")
.attr("x", -h)
.attr("y", -h)
.attr("fill", primer)
.attr("rx", `${100 * borderRadius}%`);
;
o
.append("foreignObject")
.attr("width", "100%")
.attr("height", "100%")
.attr("x", -h)
.attr("y", -h)
.html(`<center class="box">${text}</center>`)
;
}