Skip to content

Clipping a Text mark? #181

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.

Sign up for GitHub

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

Jump to bottom
Open
mbostock opened this issue Mar 3, 2021 · 3 comments
Open

Clipping a Text mark? #181

mbostock opened this issue Mar 3, 2021 · 3 comments
Labels
enhancement New feature or request

Comments

@mbostock
Copy link
Member

mbostock commented Mar 3, 2021

Should the Text mark support a clipping rect? A clipping circle? A way to reference another mark and use it as a clipping mask?

untitled-25
@mbostock mbostock added the enhancement New feature or request label Mar 3, 2021
@mbostock
Copy link
Member Author

Maybe we could do this by having one mark generate an id, and then the text mark could reference that id for clipping. For example, if you said:

Plot.rect(data, {id: "rect", ...options})

then you could say:

Plot.text(data, {clip: "rect", ...options})

and Plot would automatically pair by index (and also scope the id to each plot so that it doesn’t interfere with other plots on the page).

@Fil Fil mentioned this issue Sep 27, 2021
Open
Fil added a commit that referenced this issue Feb 10, 2022
@Fil
clip: true clips the mark to the frame
cd27b5b 
closes #165

related: #181
@Fil Fil mentioned this issue Feb 10, 2022
Merged
Fil added a commit that referenced this issue Feb 10, 2022
@Fil
clip: true clips the mark to the frame
98d3b54 
closes #165

related: #181
Fil added a commit that referenced this issue Feb 10, 2022
@Fil @mbostock
clip: true clips the mark to the frame (#752)
f0994bb 
* clip: true clips the mark to the frame

closes #165

related: #181

* reindex clip id

* Update src/style.js

Co-authored-by: Mike Bostock <[email protected]>

* Update src/style.js

Co-authored-by: Mike Bostock <[email protected]>

* data source (the actual notebook is broken atm)

* clippath => clip

* reformat horizon plot; nicer heuristic for color

* naming consistency

* tweak horizon example (#753)

* tweak horizon example

* use offset, not index

* nicer tick labels

Co-authored-by: Mike Bostock <[email protected]>
@mbostock mbostock mentioned this issue Nov 25, 2022
Closed
@Fil Fil mentioned this issue Apr 3, 2023
Closed
@Fil
Copy link
Contributor

Fil commented Apr 4, 2023 •
edited
Loading

Maybe introduce a clip: "rect" option that consumes x1, x2, y1, y2 and adds a clip-path: polygon(…)

@Fil
Copy link
Contributor

Fil commented Nov 1, 2023 •
edited
Loading

browser support for clip-path: polygon in SVG is not great…
Current best effort notebook: https://observablehq.com/@observablehq/plot-treemap-clip

Edit: Jan. 2025 it seems like all three majors browsers now have correct support for clip-path: polygon / path.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
enhancement New feature or request
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@Fil @mbostock