Straight lines on map in d3.js

Question

I am experimenting with d3.js and I have a map of the world with points that represent various cities. I would like to draw straight(ish) lines between the cities which I am doing using a LineString and d3.geo.path(). For some reason some of the lines aren't direct to the destination as you can see in the following block where the line from Europe to one of the Pacific islands creates an arc.

http://bl.ocks.org/whatsthebeef/6360703

The problem seems to occur where the line goes off one side of the map and on the other. I interpreted a part of the documentation to say that the line is drawn clockwise so I have tried switching the order of the points but it remains the same.

I am looking for something more like this

http://mbostock.github.io/d3/talk/20111116/airports.html

I can see in this example mbostock is using greatArc but it also says in the documentation this isn't necessary and there is no documentation on big arc anyway as it seems to have been deprecated.

Any ideas how to prevent this arcing?

Answer 1

To draw a straight line use:

d3.svg.line()

You will have to convert your coordinates using whatever projection you are using

var trcoords_o = projection(r.coordinates[0]);
var trcoords_d = projection(r.coordinates[1]);

This also doesn't seem to allow you to draw a line which leaves one side of the map and come in the other.