d3js 缩放、转换和翻译 [英] d3js scale, transform and translate

问题描述

我创建了 nycMap，这是一个使用 angularJS (MVC)、yeoman (build)、d3 (mapping) 和geoJSON(地理数据).

I've created nycMap, a project that uses angularJS (MVC), yeoman (build), d3 (mapping) and geoJSON (geo data).

一切都很好，但我确实需要花费相当多的时间来获得正确的比例和翻译.我想知道如何自动确定地图将在什么比例下显示最佳以及哪些 x 和 y 值进入翻译?

Everything works very nicely, but I did have to spend quite some time getting the right scale and translation. I was wondering how I can automatically figure out at what scale the map will show its best and what x and y values go into the translation?

'use strict';

japanAndCo2App.controller('MainCtrl', function($scope) {

 function makeJapanAll(){
    var path, vis, xy;

    xy = d3.geo.mercator().scale(16000).translate([-5600,2200]);
    path = d3.geo.path().projection(xy);
    vis = d3.select("#japanAll").append("svg:svg").attr("width", 1024).attr("height", 700);
    d3.json("data/JPN_geo4.json", function(json) {
      return vis.append("svg:g")
          .attr("class", "tracts")
          .selectAll("path")
          .data(json.features).enter()
          .append("svg:path")
          .attr("d", path)
          .attr("fill",function(d,i){ return d.properties.color || "transparent"});
    });
  }
  makeJapanAll();
});

(如果你对代码感兴趣，都在github上.地图的代码在scripts/controllers/main.js 与上图相同.)

(If you are interested in the code, it's all on github. The code for the map is in scripts/controllers/main.js which is the same as shown above.)

推荐答案

我遇到了同样的问题.但是当你有一个边界框时，这很容易做到，它可以从 GeoJSON 中确定(如 meetamit 所说)，或者在创建 GeoJson 时.以及想要的 SVG 的宽度.

I've had the same problems. But it is very easy to do when you have a bounding box, which can be determined from the GeoJSON (like meetamit said), or while creating the GeoJson. And the width of the wanted SVG.

我将从变量 lattop、lonleft、lonright、width 和 height 开始，用于 geojson 的边界框和图像的尺寸.我还没有忙于根据纬度差异计算出合适的高度.所以高度只是估计足够大以适合图像.其余的应该从代码中清楚:

I'll start with the variables lattop, lonleft, lonright, width and height for the bounding box of the geojson and the dimensions of the image. I haven't yet occupied myself with calculating a good height from the difference in latutude. So the height is just estimated to be big enough to fit the image. The rest should be clear from the code:

var xym = d3.geo.mercator();

// Coordinates of Flanders
var lattop = 51.6;
var lonleft = 2.4;
var lonright = 7.7;
var width = 1500;
var height =1000;

// make the scale so that the difference of longitude is 
// exactly the width of the image
var scale = 360*width/(lonright-lonleft);
xym.scale(scale);

// translate the origin of the map to [0,0] as a start, 
// not to the now meaningless default of [480,250]
xym.translate([0,0]);

// check where your top left coordinate is projected
var trans = xym([lonleft,lattop]);
// translate your map in the negative direction of that result
xym.translate([-1*trans[0],-1*trans[1]]);


var path = d3.geo.path().projection(xym);

var svg = d3.select("body").append("svg").attr("width",width).attr("height",height);

请注意，如果您越过日期变更线(180 度)，则必须考虑溢出.

Note, if you go over the date line (180 degrees), you will have to take the overflow into account.

这篇关于d3js 缩放、转换和翻译的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！