D3 Examples - d3.geo.zoom without roll

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
<style>
.zoomlayer {
    fill: transparent;
}
.land {
    fill: rgb(83, 207, 142);
}
.graticule {
    fill: none;
    stroke: grey;
}
</style>
<body>
​
<svg class='fig'></svg>
​
<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="https://d3js.org/d3.geo.projection.v0.min.js" charset="utf-8"></script>
<script src="https://d3js.org/topojson.v1.min.js"></script>
<script src="d3.geo.zoom.js"></script>
<script>
(function () {
​
    var pathToTopojson = './world110.json'  // or world50.json
​
    d3.json(pathToTopojson, main);
​
    function main(err, world) {
​
        var width = 720,
            height = 400;
​
        var countries = topojson.feature(world, world.objects.land);
​
//         var projection = d3.geo.kavrayskiy7()
//             .scale(120)
//             .rotate([0, 0, 0]);
​
        var projection = d3.geo.orthographic()
            .clipAngle(90)
            .scale(170)
            .rotate([0, 0, 0]);
​
        projection.translate([width / 2, height / 2]);
        window.projection = projection;
​
        var path = d3.geo.path()
            .projection(projection);
​
        var graticule = d3.geo.graticule();
​
        var svg = d3.select('.fig')
            .attr('height', height)
            .attr('width', width);
​
        var g = svg.append("g")
            .attr("class", "map");
​
        g.append("rect")
            .attr("class", "zoomlayer")
            .attr("width", width)
            .attr("height", height);
​
        g.append("path")
          .datum(countries)
            .attr("d", path)
            .attr("class", "land");
​
        g.append("path")
          .datum(graticule)
            .attr("d", path)
            .attr("class", "graticule");
​
        var zoom = d3.geo.zoom()
            .projection(projection)
            .on("zoom.redraw", function() {
                svg.selectAll("path")
                    .attr("d", path);
            });
​
        g
            .call(zoom)
            .on("dblclick.zoom", null);
    }
​
})();
</script>
</body>
​
    