Learn D3.js

Radial trees

The x and y properties can be used to represent any arbitrary two-dimensional coordinate system. Using an angle as the x coordinate, and a radius for y, you can draw a radial tree in polar coordinates. The following tree layout function can be used for a radial tree with a maximum angle of 360 degrees and maximum radius of height/2:

const tree = d3.tree().size([2 * Math.PI, height/2]);const treeData = tree(root);

You could also use an angle in degrees instead of radians, but it will probably need to make more conversions when using the data.

The radial effect depends on how the data is used. The following code moves the node origin's d.y pixels from the center (height/2), and then rotates them by the value in d.x converted to ...