小编clu*_*lud的帖子

如何在缩放时保持d3正交投影居中

我正在尝试复制Jason Davies"旋转世界"可视化中显示的缩放功能(https://www.jasondavies.com/maps/rotate/)

我可以旋转和缩放,但是,如果我在旋转后进行缩放,我的投影会以一个角度缩放(意味着,如果我将地球向左转15度然后缩放,则地球不再保持在画布中心) .以下是我的代码,任何帮助将不胜感激!

d3.select(window)
    .on("mousemove", mousemove)
    .on("mouseup", mouseup);

var width = 960,
height = 500;

var proj = d3.geo.orthographic()
    .scale(220)
    .translate([width / 2, height / 2])
    .clipAngle(90);


var path = d3.geo.path().projection(proj).pointRadius(1.5);

var graticule = d3.geo.graticule();

var svg = d3.select("#content").append("svg")
            .attr("width", width)
            .attr("height", height)
            .on("mousedown", mousedown);


var zoom = d3.behavior.zoom()
    .center([width / 2, height / 2])
    //.scaleExtent([.5, 10])
    .on("zoom", zoomed);

svg.call(zoom);


queue()
    .defer(d3.json, "/static/json/world.json")
    .await(ready);

function ready(error, world) {
    /*
        Define gradients
     */

    // ocean
    var ocean_fill = …
Run Code Online (Sandbox Code Playgroud)

javascript d3.js topojson

5
推荐指数
0
解决办法
1127
查看次数

标签 统计

d3.js ×1

javascript ×1

topojson ×1