Создание карты Африки с использованием d3.js и topoJSON

Я хочу создать карту Африки, используя d3.js и topoJSON. У меня есть этот источник данных https://gist.githubusercontent.com/bricedev/3905007f1794b0cb0bcd/raw/ad5c995f6990f7c3c7fad5c6206bc6fd5462f1fb/africa.json Создание карты Африки с использованием d3.js и topoJSON

Это мой код. Как я могу получить свойства и создать правильную карту? Пожалуйста, помогите мне, где ошибка?

<!DOCTYPE html> 
<html> 
<head> 
<meta name="description" content="D3byEX 12.15" /> 
<meta charset="utf-8"> 
</head> 
<body> 
<script src="http://d3js.org/d3.v3.min.js"></script> 
<script src="http://d3js.org/topojson.v1.min.js"></script> 
    <script> 
    var width = 1000, height = 728; 


    var svg = d3.select("body").append("svg") 
     .attr({ width: width, height: height }); 
    var mainGroup = svg.append("g"); 
    mainGroup.style({ stroke: "white", "stroke-width": "2px", "stroke-opacity": 0.0 }); 

    var projection = d3.geo.mercator(); 

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

    var url = 'https://gist.githubusercontent.com/bricedev/3905007f1794b0cb0bcd/raw/ad5c995f6990f7c3c7fad5c6206bc6fd5462f1fb/africa.json'; 
    d3.json(url, function (error, africa) { 
     var countries = topojson.feature(africa, africa.objects.countries).features; 
     var neighbors = topojson.neighbors(africa.objects.countries.geometries); 

     var color = d3.scale.category20(); 
     mainGroup.selectAll("path", "countries") 
      .data(countries) 
      .enter().append("path") 
      .attr("d", path) 
      .style("fill", function (d, i) { 
       return color(d.color = d3.max(neighbors[i], 
        function (n) { return countries[n].color; }) + 1 | 0); 
      }); 

     mainGroup.selectAll("path") 
      .on("mouseover", function() { 
       console.log("mouseover"); 
       d3.select(this).style("stroke-opacity", 1.0); 
      }); 
     mainGroup.selectAll("path") 
      .on("mouseout", function() { 
       d3.select(this).style("stroke-opacity", 0.0); 
      }); 
    }); 

</script>

источник

2016-12-19 Emy

Ваш topojson не в WGS84, то есть широта/долгота координатного пространства или unprojected данных. D3.projection() требует WGS84.

Ваш топойсон уже проецируется, я полагаю, что проекция Africa Lambert Conformal Conic. Вам не нужно использовать проекцию, чтобы отобразить это в d3.js. Для того, чтобы отобразить эти данные без проекции можно определить проекцию вашего geoPath как:

path = d3.geoPath().projection(null);

Это как topojson проектировалось в the block, в котором эти данные пришли.

Если вам нужно масштабировать или переводить проекцию, то вам может помочь d3.geoTransform, см. this block.

В качестве альтернативы вы можете перепрограммировать свой топоизон так, чтобы он использовал пары lat/long и правильно выполнил проект, используя d3.projection().

источник

2016-12-19 22:34:50

Создание карты Африки с использованием d3.js и topoJSON

ответ

Смежные вопросы