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();
});

（如果您对代码感兴趣，那么 on 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时确定很容易做。

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的边界框和图像的尺寸。我还没有占据自己计算一个好的高度从差异的latutude。因此，高度只是估计足够大以适应图像。其余的应该从代码清楚：

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屋！