Observable-Community

Skärmavbild 2023-06-02 kl. 10.22.57.png

Skärmavbild 2023-06-02 kl. 10.22.38.png

It's probably because d3-annotation expects the svg node to be attached to the DOM (e.g. to measure it with elem.getBBox()). But it is not attached before you return it

yeah.. i was afraid it was something like that.

which means it won't work as a mark :disappointed: w/o a lot of rewriting of d3-annotation.
or... a setTimeout? Will try that first, but it is a really hacky way of doing it.

It worked with setTimout but it is ugly.

Is there a lifecycle event I can hook into in observable plot to know if it has rendered?
kind of like <https://svelte.dev/tutorial/tick|tick> in Svelte,  <https://legacy.reactjs.org/docs/hooks-effect.html|useEffect> in React or  <https://api.jquery.com/ready/|ready> in jQuery?

requestAnimationFrame? Lifecycle events for DOM elements are only available on custom elements, unfortunately.

Just tried it out and it is nicer than my initial setTimeout idea :slightly_smiling_face:

If you need to check whether a node / element has been inserted into the document you can query <https://developer.mozilla.org/en-US/docs/Web/API/Node/isConnected|Node.isConnected>.

Cool! Never seen that before. Will have a look.

this is what Plot.tip does, FYI: <https://github.com/observablehq/plot/blob/df3a3add051049986c029fdad727bd64c929e622/src/marks/tip.js#L244>