Skip to content

This change allows the user to change the size of the label text. - #113

Open
nverwer wants to merge 1 commit into
vasturiano:masterfrom
nverwer:allow-text-size-modification
Open

This change allows the user to change the size of the label text.#113
nverwer wants to merge 1 commit into
vasturiano:masterfrom
nverwer:allow-text-size-modification

Conversation

@nverwer

@nverwer nverwer commented Nov 22, 2023

Copy link
Copy Markdown
Contributor

The constants for text size and stroke width have been made configurable, with the previous constant values as defaults.

Comment thread src/sunburst.js
sort: { onChange(_, state) { state.needsReparse = true }},
label: { default: d => d.name },
labelOrientation: { default: 'auto' }, // angular, radial, auto
textSize: {default: 12},

Copy link
Copy Markdown
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

May be more fitting to call these two props labelFontSize and labelStrokeWidth.

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I will have a look later, and follow your suggestions. Thank you for having a look!

Comment thread src/sunburst.js
state.canvas = state.svg.append('g')
.style('font-family', 'sans-serif')
.style('font-size', `${TEXT_FONTSIZE}px`);
.style('font-size', `${state.textSize}px`);

Copy link
Copy Markdown
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This needs to be moved to the update section so it can react to font size changes.

Comment thread src/sunburst.js
sort: { onChange(_, state) { state.needsReparse = true }},
label: { default: d => d.name },
labelOrientation: { default: 'auto' }, // angular, radial, auto
textSize: {default: 12},

Copy link
Copy Markdown
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Even though this is already an improvement, we could go a step further and turn these props into accessor functions, just like most of the other props. That way you could set different font sizes / stroke widths per individual element.

Comment thread src/sunburst.js
sort: { onChange(_, state) { state.needsReparse = true }},
label: { default: d => d.name },
labelOrientation: { default: 'auto' }, // angular, radial, auto
textSize: {default: 12},

Copy link
Copy Markdown
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Also, would you mind adding docs and types for these new attributes?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants