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

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:

• Ok, I'll add one. Aug 20, 2016 at 18:14
• Yes, I'd need something that could work with different widths, I'l change the picture once again, because it's slightly different than what I achieved in d3.js. Aug 20, 2016 at 19:10
• I notice in your updated second image there are some that overlap. For example, the mid grey strip near the top of the circle overlaps the green strip that starts next to it (even though both the grey end points are inside the range of the green end points). If that is permitted in the solution then it will be easier to solve. Aug 20, 2016 at 19:31
• If you have existing code in d3.js that already gives the desired result, it would be helpful to see it. Aug 20, 2016 at 19:32
• I think I'll have to live with some of the curves overlapping. Yes, I can paste here d3.js code, but it does not deal with drawing the chords. It's already in the library, I think that it's here in ribbon function: github.com/d3/d3-chord/blob/master/src/ribbon.js. Aug 20, 2016 at 19:39

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

// create all the parts afterward
shape.absarc(0, 0, (RADIUS-2), -1.4639537206164, -1.3041396376011, true);
shape.absarc(0, 0, (RADIUS-2), 4.5262534414805, 4.6513392175639, true);

// 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;