D3：正确缩放和转动地图右侧向上

Question

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

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

在查看了其他几个答案（例如Center a map in d3 given a geoJSON object）后，我尝试弄乱投影，但每当我更改比例，添加平移或旋转时，生成的地图都不会受到影响。

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

有什么想法吗？

可以在这里找到一个小提琴：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]);

您将在稍后创建投影并将投影分配到路径中。因此，未定义的内容存储在路径的投影中。

所以修复很简单

  //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。