Skip to content
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

fix(arcs) skip generation of very small arcs #2022

Closed
wants to merge 1 commit into from

Conversation

tkonopka
Copy link
Contributor

Addresses #942

Background

Issue #942 reports unexpected behavior in the sunburst chart. When the data contains an element that should produce an extremely small arc, that arc can instead "flip around" and dominate the chart.

A similar effect can occur with the pie chart.

const pieData = [
  {
    id: "A",
    value: 30
  },
  {
    id: "B",
    value: 20
  },
  {
    id: "C",
    value: 1e-9  // very small value compared to values in 'A' and 'B'
  }
];

Visualizing the above data in a donut chart produces:

Slice C should be tiny or invisible, but instead the yellow color (third color in the nivo color scheme) dominates the visualization.

https://codesandbox.io/s/stoic-cray-nfyf1n?file=/src/App.js

Fix

The cause of this effect lies in d3-shape. The bug only affects arcs with rounded corners. I raised an issue to let them know.

The proposed fix for nivo involves setting a nonzero angle threshold in the @nivo/arcs package. The arc renderer can now skip rendering arcs that would be too small to see. Fixing the arcs package automatically fixes issues in @nivo/pie and @nivo/sunburst.

The new threshold (now set to 1e-7 radians) is set via a prop skipAngle in ArcsLayer. The name matches a similar prop in ArcLabelsLayer and ArcLinkLabelsLayer. However, this prop is now 'hidden' inside the arcs package - there are no changes to the API for the Pie and Sunburst components. The justification for 'hiding' this threshold is that it should not have any impact on expected behavior of the chart - tiny slices are expected to be invisible, and this threshold ensures this is the case despite the bug in d3-shape.

The PR also includes some unit tests for the pie and sunburst packages.

@codesandbox-ci
Copy link

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 6f28cc1:

Sandbox Source
nivo Configuration
stoic-bohr-2jq0pg PR

@stale stale bot added the stale label Sep 8, 2022
Repository owner deleted a comment from stale bot Sep 8, 2022
@stale stale bot removed the stale label Sep 8, 2022
@tkonopka
Copy link
Contributor Author

The underlying bug has been fixed in d3-shape v3.2, so this patch is no longer needed.

@tkonopka tkonopka closed this May 16, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

2 participants