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.

enter image description here

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:

enter image description here

  • $\begingroup$ Ok, I'll add one. $\endgroup$ Commented Aug 20, 2016 at 18:14
  • $\begingroup$ 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. $\endgroup$ Commented Aug 20, 2016 at 19:10
  • $\begingroup$ 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. $\endgroup$ Commented Aug 20, 2016 at 19:31
  • $\begingroup$ If you have existing code in d3.js that already gives the desired result, it would be helpful to see it. $\endgroup$ Commented Aug 20, 2016 at 19:32
  • $\begingroup$ 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. $\endgroup$ Commented Aug 20, 2016 at 19:39

1 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

  • $\begingroup$ I'd be interested to see an explanation of how your solution works, and it might be useful for future visitors too... $\endgroup$ Commented Aug 26, 2016 at 12:38
  • 1
    $\begingroup$ I've added a simple explanation... $\endgroup$ Commented Aug 27, 2016 at 6:38
  • $\begingroup$ Can you post a working example? (one way to do it could be with jsfiddle.net) $\endgroup$
    – trusktr
    Commented Aug 28, 2016 at 1:00

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.