-
Notifications
You must be signed in to change notification settings - Fork 185
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
title, subtitle #1761
title, subtitle #1761
Conversation
This comment was marked as outdated.
This comment was marked as outdated.
src/plot.js
Outdated
for (const e of [[title, "h2"], [subtitle, "h3"], ...legends, svg, [caption, "figcaption"]]) { | ||
const [contents, tag] = Array.isArray(e) ? e : [e]; | ||
if (contents == null) continue; | ||
if (tag && (!contents.ownerDocument || tag === "figcaption")) { | ||
const c = document.createElement(tag); | ||
if (tag === "h2" || tag === "h3") c.className = `${className}-${tag}`; | ||
c.appendChild(contents.ownerDocument ? contents : document.createTextNode(contents)); | ||
figure.appendChild(c); | ||
} else figure.appendChild(contents); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This feels like it’s written a bit too generically; probably better to just break out the code separately for title, subtitle, legends, svg, and caption.
Note that we could also do figure.append(...legends, svg)
for that case.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I've updated the logic, hopefully it feels more readable/less messy?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Better! But we need to respect the context.document instead of using the global document.
I've now added documentation, with a custom stylesheet to bypass vitepress margins on h2 and h3. |
Co-authored-by: Mike Bostock <[email protected]>
* title, subtitle * better JSDoc links (scoped to this PR) * make the figure creation logic more readable (hopefully)
* title, subtitle * better JSDoc links (scoped to this PR) * make the figure creation logic more readable (hopefully)
Add top-level title and subtitle options.
Like caption, these options make a figure element. By default the title is considered text, and set in a H2 element. The subtitle in a H3 element. If an HTML node is passed, it is used as is (this differs from caption, where the contents are always wrapped in a figcaption element).
I'd like to add default styles, but better discuss them here before, because changing the styles will modify all the snapshot tests. And, in that case, maybe add
${className}-figure
on the figure element?Default styles could be something like:
Demo: https://observablehq.com/@observablehq/plot-title-1761
closes #92
supersedes #423