Conversation
A drilled sunburst view root can become a full annular sector when rootToNode is triggered. In that state the label represents the centered root, not an angular slice, so the label should sit on the chart center without inheriting radial rotation. Constraint: Preserve existing radial and tangential rotation for ordinary sunburst sectors and outside labels. Rejected: Keep using the annulus midpoint | it leaves full-circle drilldown labels offset from the visual root. Rejected: Only adjust x/y | the label can remain rotated by the previous radial orientation. Confidence: high Scope-risk: narrow Directive: Do not reapply radial rotation to labels placed at the center of a full-circle sunburst sector. Tested: git diff --check Tested: eslint src/chart/sunburst/SunburstPiece.ts test/ut/spec/series/sunburst.test.ts Tested: tsc --noEmit Tested: jest --config test/ut/jest.config.cjs --coverage=false --runInBand test/ut/spec/series Not-tested: Full visual screenshot baseline suite
|
Thanks for your contribution! The pull request is marked to be To reviewers: If this PR is going to be described in the changelog in the future release, please make sure this PR has one of the following labels: This message is shown because the PR description doesn't contain the document related template. |
There was a problem hiding this comment.
Pull request overview
This PR fixes sunburst root label layout when drilldown (sunburstRootToNode) makes the view root a full 360° annular sector, ensuring the label is centered at the chart center and does not receive automatic radial/tangential rotation. It also adds a Jest regression test validating centered position and zero rotation after drilldown.
Changes:
- Update sunburst label layout to detect full-circle sectors even when
r0 > 0and place the label at(cx, cy). - Prevent centered full-circle labels from inheriting auto rotation.
- Add a regression test that drills into a node and asserts centered label position and zero rotation.
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 1 comment.
| File | Description |
|---|---|
src/chart/sunburst/SunburstPiece.ts |
Adjusts label positioning/rotation logic for full-circle (2π) sectors so drilled view-root labels center correctly. |
test/ut/spec/series/sunburst.test.ts |
Adds a Jest test covering the drilldown full-annulus case (center position + rotation). |
Comments suppressed due to low confidence (1)
src/chart/sunburst/SunburstPiece.ts:277
- Centering the label for full-circle sectors currently forces
rotate = 0unconditionally whenisLabelAtCenteris true. This also disables an explicitly configured numericlabel.rotatevalue (degrees), which is inconsistent with other series (e.g., pie keeps numeric rotate even for center labels). Consider only overriding rotation for the auto modes ('radial'/'tangential'), while still honoring numeric rotation when provided.
let rotate = 0;
if (isLabelAtCenter) {
rotate = 0;
}
else if (rotateType === 'radial') {
rotate = normalizeRadian(-midAngle)
+ (needsFlip ? Math.PI : 0);
}
else if (rotateType === 'tangential') {
rotate = normalizeRadian(Math.PI / 2 - midAngle)
+ (needsFlip ? Math.PI : 0);
}
else if (zrUtil.isNumber(rotateType)) {
rotate = rotateType * Math.PI / 180;
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| function findNodeByName(seriesModel: SunburstSeriesModel, name: string): TreeNode { | ||
| let targetNode: TreeNode; | ||
|
|
||
| seriesModel.getData().tree.root.eachNode(node => { | ||
| if (node.name === name) { | ||
| targetNode = node; | ||
| } | ||
| }); | ||
|
|
||
| return targetNode; | ||
| } |
|
The changes brought by this PR can be previewed at: https://echarts.apache.org/examples/editor?version=PR-21598@b2578e5 |
The PR had unit coverage for drilldown root label centering. This adds a browser-level HTML regression case that drills into a full annular root sector and asserts the label remains centered with zero auto rotation. Constraint: Reviewer feedback expects browser-level HTML cases for visual layout fixes Confidence: high Scope-risk: narrow Tested: npm test -- --runInBand test/ut/spec/series/sunburst.test.ts Tested: Browser loaded test/sunburst-drilldown-root-label.html after dev-fast bundle and showed checked: Pass
Summary
Fixes #21133.
When sunburstRootToNode drills into a node, that node can become a full 360-degree annular sector. Its label represents the centered view root rather than an angular slice, so the label should be placed at the chart center and should not inherit radial/tangential rotation.
This PR updates the sunburst label layout for full-circle centered labels and adds a Jest regression test covering both center position and zero rotation.
Root Cause
SunburstPiece only centered labels for full circles when r0 === 0. After drilldown, the view root is a full annular sector with r0 > 0, so the label was placed at the annulus midpoint and still received radial rotation.
Verification
Screenshot