The gnomonic projection is available as d3.geo.gnomonic. See also the interactive version.
This is copied from mbostock's example
It shows what happens when you start a transition and select shit that would also include shit but it's not inside the async function where it's getting created so it never gets selected and transitioned.
| <!DOCTYPE html> | |
| <meta charset="utf-8"> | |
| <style> | |
| .graticule { | |
| fill: none; | |
| stroke: #777; | |
| stroke-width: .5px; | |
| stroke-opacity: .5; | |
| } | |
| .land { | |
| fill: #222; | |
| } | |
| .boundary { | |
| fill: none; | |
| stroke: #fff; | |
| stroke-width: .5px; | |
| } | |
| </style> | |
| <body> | |
| <script src="http://d3js.org/d3.v3.js"></script> | |
| <script src="http://d3js.org/topojson.v1.min.js"></script> | |
| <script> | |
| var width = 960, | |
| height = 960; | |
| var projection = d3.geo.gnomonic() | |
| .clipAngle(90 - 1e-3) | |
| .scale(150) | |
| .translate([width / 2, height / 2]) | |
| .precision(.4) | |
| .rotate([12,36,180]) | |
| var path = d3.geo.path() | |
| .projection(projection); | |
| var graticule = d3.geo.graticule(); | |
| var svg = d3.select("body").append("svg") | |
| .attr("width", width) | |
| .attr("height", height); | |
| svg.append("path") | |
| .datum(graticule) | |
| .attr("class", "graticule") | |
| .attr("d", path); | |
| d3.json("world-50m.json", function(error, world) { | |
| svg.insert("path", ".graticule") | |
| .datum(topojson.feature(world, world.objects.land)) | |
| .attr("class", "land") | |
| .attr("d", path); | |
| svg.insert("path", ".graticule") | |
| .datum(topojson.mesh(world, world.objects.countries, function(a, b) { return a !== b; })) | |
| .attr("class", "boundary") | |
| .attr("d", path); | |
| d3.selectAll('.land') | |
| .transition() | |
| .delay(2999) | |
| .duration(6999) | |
| .style("fill","lawngreen") | |
| }); | |
| d3.select(self.frameElement).style("height", height + "px"); | |
| d3.select('svg') | |
| .style('background', 'green') | |
| .transition() | |
| .delay(4000) | |
| .duration(3000) | |
| .style('background', 'blue') | |
| d3.selectAll('path') | |
| .transition() | |
| .duration(5000) | |
| .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")scale(2)translate(" + -0 + "," + -0 + ")") | |
| .style("stroke-width", 4 + "px") | |
| .style("stroke", "pink"); | |
| </script> |
