d3-chord | Visualizations relationships or network flow | Data Visualization library

I am developing a D3.js chord diagram to visualize people flows between different areas of an airport. When clicking an an area's outer arch, only the chords running to that arch are shown. I am now getting to the fine touches of it and am lacking any clues on how to approach one design problem.

Here's the photoshop-made target I am aiming for:

I did find a solution for the problem of chords crossing each other (using this excellent blog post https://www.visualcinnamon.com/2016/06/orientation-gradient-d3-chord-diagram), but the problem I am now still having, is that adjacent chords still overlap:

This just looks really hideous and I would very much like to avoid this from happening, however I've got no clue on how to achieve this... Is this possible with d3.js? (I am currently using v3, as the "avoid chords from crossing" hack is customizing d3.js v3 source files). Otherwise, where might I be able to be customize d3 to change the shape of the chords?

Edit: I want to emphasize, that I have figured out the problem of chord ORDERING, this is already correct, the chords do not cross each other, but still overlap. Here is an illustration to clarify my problem:

jsfiddle: https://jsfiddle.net/t2g3je69/