Solve simple D3.js crossing edges in small graphs

I am developing a web application that lets you join points in an interactive graph. I'm using D3.js, with the force-directed module.

But I have a very particular problem: crossing edges in small networks.

I've read this post: D3.js force directed graph, reduce edge crossings by making edges repel each other but it's about larger networks.

My network starts like this:

Then, the user will be creating edges, leaving something like this:

The problem is that I find a lot of avoidable crossing edges. This is a typical example:

How can I solve this? I know that some cases are just impossible to resolve. But my network will have very few nodes, and most times it will be possible to draw them without crossing edges.

How can I try to find the optimal layout in this small networks?? Thanks in advance.

The Sugiyama Algorithm and Gansner et al. provides edge minimization. There are several javascript-implementations across different open source graph libraries that you can use