D3: Правильно Масштаб и Turn Карта правой стороной вверх

Question

Я пытаюсь добавить карту сайта в D3 и topoJSON, который выглядит следующим образом:

Однако, когда я генерировать карту с D3/topoJSON, она выглядит маленькой и перевернутой.

После просмотра несколько других ответов (например, Center a map in d3 given a geoJSON object), я пытался баловаться с проекцией, но карта генерируется кажется неизменной всякий раз, когда я изменить масштаб, добавить перевод, или повернуть его.

Я загрузил шейп-файл здесь: http://openstreetmapdata.com/data/land-polygons и преобразовал его в topoJSON в mapshaper.

Любые мысли?

скрипку можно найти здесь: 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.