Straight lines on map in d3.js

[John Bower]

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?

[Kai Chang]

Use d3.svg.line if you want straight lines in the final visualization:

https://github.com/mbostock/d3/wiki/SVG-Shapes#wiki-line

d3.geo.path draws the shortest path between two points on the globe (great arc) given a projection. In the mercator projection, this can appear as a very curved line.

You can prevent the the line from crossing the edge by translating the projection to the left. The route doesn't pass through the Americas, so you could let that continent get cut by the edge.

--
You received this message because you are subscribed to the Google Groups "d3-js" group.
To unsubscribe from this group and stop receiving emails from it, send an email to d3-js+un...@googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.

[John Bower]

Thanks for the response. you have made things clearer for me.

I am using longitudinal and latitudinal coordinates to position the points. I guess if I want to use d3.svg.line I would some how need to convert them to x y coordinates because when I try with the long,lat coordinates it paints a small black line in the top left.

I am no concerned about a slight arcing of the line so how would you suggest to do this using path if the coordinate conversion is too complex?  

Ultimately there will be many more lines passing all over the continents so from what I understand the translation won't work. What I really need is, if the destination latitude is greater then draw the line. If not then draw the line from the destination to the origin. I have no idea if something like this is possible but when I switched coordinates it didn't make a difference. 

[Kai Chang]

You can use the projection to convert lat/long to x/y:

projection([50,50])       ->  [613.472, 325.418]

[John Bower]

That's great!

Thanks very much