draw a chord in three.js as in d3.js

Question

I'm starting to learn three.js and want to create a chord diagram as possible in d3.js, but from ground up. I've created a scene and have circle segments on xz axes. But I got stuck on the chords. I looked up d3.js code (path+quadratic curve) but need some good example or explanation how to do it in three.js.

What I'd like to do is to have chords with stroke and fill joining my circle segments with different widths at both ends, nicely curved and thinner in the middle (same as d3.js) with a way to set z-index and opacity in the future.

Some example could be really helpfull, thanks.

I want to achieve something like this:

Answer 1

Ok, I've found the solution myself.

It goes like this:

// create shape
shape = new THREE.Shape();

// move it to first point of the chord
shape.moveTo(0+(RADIUS-2)*Math.cos(-1.4639537206164), 0+(RADIUS-2)*Math.sin(-1.4639537206164));

// create all the parts afterward
shape.absarc(0, 0, (RADIUS-2), -1.4639537206164, -1.3041396376011, true);
shape.quadraticCurveTo(0, 0, 0+(RADIUS-2)*Math.cos(4.5262534414805), 0+(RADIUS-2)*Math.sin(4.5262534414805));
shape.absarc(0, 0, (RADIUS-2), 4.5262534414805, 4.6513392175639, true);
shape.quadraticCurveTo(0, 0, 0+(RADIUS-2)*Math.cos(-1.4639537206164), 0+(RADIUS-2)*Math.sin(-1.4639537206164));

// create geometry
geometry = new THREE.ShapeGeometry( shape );
// create mesh
mesh = new THREE.Mesh( geometry, new THREE.MeshBasicMaterial( { color: 0x000000, side: THREE.DoubleSide } ) ) ;
// rotate
mesh.rotation.x = 90 * Math.PI/180;
// add to scene
scene.add( mesh );

1) create Shape object
2) move offset to the first point on the arc
3) create arc with the same center and smaller radius as circle (start angle of the first point, end angle second)
4) use quadratic curve with control point (circle center) and the third point
5) use arc the same way as before
6) complete shape with quadratic curve and the last point
7) set geometry, material, add it to scene