react-d3 | Files for the Udemy course Fundamental D3.js with React | Frontend Framework library

So I figured out my problem. In my App.css file I only had

Given your preferred arc angle A and number of points N, find the angular distance between each point:

PA = A / (N - 1).

Next, find the angle described by a vertical line from the circle's center and the point we're calculating.

Initial observations:

• The largest possible value of this angle is A / 2
• The smallest possible value is PA / 2 if N is even, 0 if N is odd.
• The angle changes in increments of PA

Counting points away from the center (X), we can describe the angle using terms we've defined:

A / 2 - PA * (floor(N / 2) - X)

For the examples directly below, X is 1 and 2 respectively.

Assuming:

• A = 90° (not depicted accurately)
• N = 4

From which follows:

• PA = 30°

Plugging in these values, we get:

45 - 30 * (floor(2) - 1) = 15

and

45 - 30 * (floor(2) - 2) = 45

Now that we have the angle a, we can use trigonometry (specifically SOH-CAH-TOA) to find the x and y offsets of the point relative to the center.

Note that because the points to the left of the plumb line are mirror images of their counterparts to the right, you need only to negate the x-offset from the center to get the locations of the left-hand points.

Update: Here's a simpler (but still math-based) implementation.

Sadly there is no simple way to get SVG elements' content to wrap like it would in HTML. However I did find this answer to a similar question which suggests using the D3 Plus library to add text wrapping to D3.

If for some reason that isn't an option you will probably have to calculate the wrapping yourself, it is a bit of a nasty process but is doable with some effort. In general terms you need to:

1. Create an HTML element with the same width and font styles as the target SVG text
2. Add the desired content to this element word-by-word
3. After adding each word check the height of the HTML element, if it has increased you know you need a newline before that word
4. Once you know how many lines it needs use elements to output each line of text (you'll have to manually set the top offset for each new line)

I'd definitely advise using the library though if at all possible!

Not a React user, and never heard of PieHooks etc but thanks to your working demo I could fiddle about and see that the tick values aren't set at absolute values around the circle but offset to the last tick - like the 'data' in fact.

e.g. This gives 36 evenly spaced ticks (though why they start slightly off-vertical I don't know):

This is a problem with react-table v7.0.1, upgrading to v7.0.2 fixes the problem.

It's a minification bug. Here is the exact commit that fixed the problem.

From the Changelog :

7.0.2

• Fixed an issue where the internal flexRenderer would not work correctly in production due to the strangest friggin' minification bug I've ever encountered. 🤷‍♂️

The constructor and methods are part of the class, therefore they have to be inside it:

You need to use the correct props i.e. minValue and maxValue. (not min max)

Working demo

Code snippet

The width and height of the SVG are 400, and the radius of your pie is 400 too. So only a quarter of the pie is visible.

If you increase the size of the SVG to 800 (radius x 2), and add a g element to contain your pie, which is translated to the centre of the SVG, then it will show.

For example, update your code to include:

You forgot to use didUpdate listener, that's why the pie chart didn't update correctly. One should also clear d3-related stuff container (in this case) before each redraw.

https://codesandbox.io/s/react-d3-pie-chart-2-qezz7?file=/src/Pie/Pie.js