The Caspian Sea disappears on this example with .rotate([107.1,-78.6,-162])
it disappears with all versions of d3v4 (from https://unpkg.com/d3@4.0.0 to https://unpkg.com/d3@4.11.0 ).
EDIT: the problem lay in the json file that this example uses. Fixed with latest https://unpkg.com/world-atlas@1/world/110m.json
Original research by Philippe Rivière for d3-geo issue #121.
xxxxxxxxxx
<meta charset="utf-8">
<body>
<script src="https://unpkg.com/d3@4.11.0/build/d3.js"></script>
<script src="https://d3js.org/topojson.v2.min.js"></script>
<script src="versor.js"></script>
<script>
var width = 960,
height = 500;
var projection = d3.geoOrthographic()
.rotate([107.1,-78.6,-162]);
var canvas = d3.select("body").append("canvas")
.attr("width", width)
.attr("height", height);
var context = canvas.node().getContext("2d");
var path = d3.geoPath()
.projection(projection)
.context(context);
canvas.call(
d3.drag()
.on("start", dragstarted)
.on("drag", dragged)
.on("end", dragended)
);
var render = function() {},
v0, // Mouse position in Cartesian coordinates at start of drag gesture.
r0, // Projection rotation as Euler angles at start.
q0; // Projection rotation as versor at start.
var inertia = {};
function dragstarted() {
v0 = versor.cartesian(projection.invert(d3.mouse(this)));
r0 = projection.rotate();
q0 = versor(r0);
if (inertia.timer) inertia.timer.stop();
inertia = {};
}
function dragged() {
var inv = projection.rotate(r0).invert(d3.mouse(this));
if (isNaN(inv[0])) return;
var v1 = versor.cartesian(inv),
q1 = versor.multiply(q0, versor.delta(v0, v1)),
r1 = versor.rotation(q1);
projection.rotate(r1);
render();
inertia.q1 = q1;
inertia.v0 = inertia.v1;
inertia.v1 = v1;
inertia.date = inertia.datenew;
inertia.datenew = performance.now();
}
function dragended() {
if (!inertia.v0) return;
var inv = projection.rotate(r0).invert(d3.mouse(this));
if (isNaN(inv[0])) return;
var v2 = versor.cartesian(inv);
var A = 10;
var K = A * (performance.now() - inertia.date);
inertia.timer = d3.timer(function(e) {
var ee = Math.exp( - e / K ); // eased time
var q2 = versor.multiply(inertia.q1, versor.delta(inertia.v0, v2, A * (1 - ee))),
r2 = versor.rotation(q2);
projection.rotate(r2);
render();
if (ee < 0.05) inertia.timer.stop();
}, 50);
}
d3.json("https://unpkg.com/world-atlas@1/world/110m.json", function(error, world) {
if (error) throw error;
var land = topojson.feature(world, world.objects.land);
render = function() {
context.clearRect(0, 0, width, height);
context.beginPath();
path(land);
context.fill();
context.strokeStyle = 'black';
context.beginPath();
path({type:"Sphere"});
context.lineWidth = 2.5;
context.stroke();
context.fillText(projection.rotate().map(d => Math.floor(10*d)/10), 10, 10 )
};
render();
});
d3.select(self.frameElement).style("height", height + "px");
</script>
https://unpkg.com/d3@4.11.0/build/d3.js
https://d3js.org/topojson.v2.min.js