D3：正确缩放地图并将地图正面朝上

Question

我正在尝试将地图添加到 D3 和 topoJSON 中的站点，如下所示：

但是，当我用 D3/topoJSON 生成地图时，它看起来很小而且上下颠倒。

查看其他几个答案（例如 Center a map in d3 given a geoJSON object）后，我尝试弄乱投影，但无论何时更改比例、添加平移或旋转，生成的地图似乎都没有受到影响。

我在这里下载了 shapefile：http://openstreetmapdata.com/data/land-polygons 并在 mapshaper 中将其转换为 topoJSON。

有什么想法吗？

一个fiddle可以在这里找到：http://jsfiddle.net/r10qhpca/

var margin = {top: 60, right: 40, bottom: 125, left: 100},
      containerWidth = $('.events-section1-graph').width(),
      containerHeight = $('#events .section1').height();  

  var width = containerWidth - margin.left - margin.right,
      height = containerHeight - margin.top - margin.bottom;

  var xScale = d3.scale.linear()
                 .range( [0, width] ),
      yScale = d3.scale.linear()
                 .range( [height, 0] );

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

  var projection = d3.geo.mercator()
                     .scale(5000000)
                     .translate([width / 2, height / 2])
                     .rotate([0, 0, 180]);


  var svg = d3.select('.events-section1-graph')
              .append('svg')
              .attr('width', width + margin.left + margin.right)
              .attr('height', height + margin.top + margin.bottom)
              .append('g')
              .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');

  queue().defer(d3.json, 'js/continent.json')
         .await(ready);

  function ready(err, world) {
    if (err) console.warn("Error", err);

    var tj = topojson.feature(world, world.objects.continent);

    var continent = svg.selectAll('.continent-path')
                       .data(tj.features)
                       .enter()
                       .append('path')
                       .attr('class', 'continent-path')
                       .attr('d', path);

Answer 1

问题出在这里：

  var path = d3.geo.path()
    .projection(projection);//projection is undefined @ the moment
  var projection = d3.geo.mercator()
    .scale(width)
    .translate([width / 2, height / 2]);

您稍后将创建投影并将投影分配到路径中。因此 undefined 被存储在路径的投影中。

所以修复很简单

  //first make projection  
  var projection = d3.geo.mercator()
    .scale(width)
    .translate([width / 2, height / 2]);
  //then assign the projection to the path
  var path = d3.geo.path()
    .projection(projection);

工作代码here。

D3：正确缩放地图并将地图正面朝上

D3: Properly Scale and Turn Map Right-Side-Up

javascript

css

geojson

d3.js

topojson