Avoiding Tangles in Long Networks, D3 Force Diagram - d3.js

Question

I am using the D3 Force Diagram and trying to find a way to make a network more "linear" and avoid "tangles" when the network generates, especially on long networks.
Example of Tangles
No Tangles, Better but not Ideal
Ideal result, network in a left to right line
Solutions that won't work:
increasing charge
reducing gravity
The example file I built on VizHub is simple, and although increasing charge may seem to work for small networks, 20-50 items will get tangled even with a very strong charge.
I have attempted to seed the location of the nodes starting locations based on the known "rough" rank order of the network. However, this gets disregarded and overwritten immediately by the on(tick) action. I may likely be doing something wrong and may need to do the seeding at a different point in the code but I was not able to find good examples or documentation on this.
I also attempted anchoring some points (less than ideal) but the links disregarded the seeded nodes locations. Again, quite possible that I didn't do it right and that may be my problem, but I was unable to find good examples of anchoring as well.
node.attr("transform", function (d) {
return "translate(" + d.x_seed + "," + d.y_seed + ")";})
Seeding when on("tick",...) disabled
I am constrained to using D3 version 3.5.17 at the latest so I cannot use some of the more modern force tools (like forceY) that would help "flatten" the network.
Any ideas on a good way to get the "ideal" result? Seeding, anchoring, something else?

Answer 1

I've partially answered my question. These have been integrated into the VizHub example now.
How to seed the locations on load.
for (var i = 0; i < nodesData.length; i++){
var t = nodesData[i];
var x_seed = t.rank*width/totalNodes
t.x_seed = x_seed;
t.x = x_seed;
var y_seed = var y_seed = height/2 + Math.random()*height/20 - height/40; // randomize y starting location a little to prevent nodes getting stuck in line
t.y_seed = y_seed;
t.y = y_seed;
}
Anchoring the first, last, and middle nodes:
force.on("tick", function () {
link
.attr("x1", function (d) {
return d.source.x;})
.attr("y1", function (d) {
return d.source.y;})
.attr("x2", function (d) {
return d.target.x;})
.attr("y2", function (d) {
return d.target.y;});
node
.attr("transform", function (d) {
if(d.rank == totalNodes || d.rank == 1 || d.rank == Math.floor(totalNodes/2)){
d.x = d.x_seed
d.y = d.y_seed
}
return "translate(" + d.x + "," + d.y + ")";
});
});