text.annotation-note-label overlaps text.annotation-note-title (rather than offsetting)
Opened this issue · 0 comments
kortina commented
Hi, tx for making this great library. It seems fairly straightforward to use, but I am having an issue trying to follow the basic examples where the text.annotation-note-label
just renders in the same position as text.annotation-note-title
(rather than below it on the y-axis as show in the example).
Here is the full code:
https://observablehq.com/@kortina/wall-st-vs-main-st
And relevant snippet:
const annotations = [
{
note: { title: "2008 Financial Crisis", label: "Unemploymentꜛ S&P500 ꜜ" },
x: x(new Date(2008, 4)),
y: yLeft(0.09),
dy: 100,
dx: -150
},
{
note: { title: "COVID-19" },
x: x(new Date(2020, 2)),
y: yLeft(0.07),
dy: 50,
dx: -150
}
]
const makeAnnotations = d3.annotation()
.editMode(false)
.notePadding(0)
.type(d3.annotationCalloutCircle)
.annotations(annotations)
svg
.append("g")
.attr("class", "annotation-group")
.attr("clip-path", clipId) // uncomment to animate annotation
.call(makeAnnotations)
}
Am I doing something silly here? Or do I need to add some extra custom css to get the label to offset by the correct y amount to render below the title?