Визуализация Федеральных округов России через d3.js

Question

Пытаюсь визуализировать федеральные округа России через d3.js. Взял координаты отсюда (в формате Geojson). Перевел эти координаты в формат TOPOjson. И возникла проблема с этими координатами. А именно, что после визуализации, у меня получилось вот такое кривое изображение:

Не понимаю откуда взялась эта "замочная скважина" и некоторые границы не отображаются как положено. Может быть кто-нибудь знает как решить данную проблему?

Код:

<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Map</title>
    <script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>
    <script type="text/javascript" src="http://d3js.org/queue.v1.min.js"></script>
    <script type="text/javascript" src="http://d3js.org/topojson.v1.min.js"></script>
</head>
<body>
<h1>header</h1>
<style>
    path {
        stroke: white;
        stroke-width: 1px;
    }
    body {
        font-family: Arial, sans-serif;
    }
    div.tooltip {
        position: absolute;
        text-align: center;
        width: 150px;
        height: 25px;
        padding: 2px;
        font-size: 10px;
        background: #FFFFE0;
        border: 1px;
        border-radius: 8px;
        pointer-events: none;
    }
</style>
<script type="text/javascript">
    var width = 1080,
        height = 960;

    var div = d3.select("body").append("div")
        .attr("class", "tooltip")
        .style("opacity", 0);

    var svg = d3.select("body").append("svg")
        .attr("width", width)
        .attr("height", height);

    var projection = d3.geo.albers()
        .rotate([-105, 0])
        .center([-10, 65])
        .parallels([52, 64])
        .scale(700)
        .translate([width / 2, height / 2]);

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

    queue()
        .defer(d3.json, "./federal_districts.json")
        .await(ready);

    function ready(error, map) {

        svg.append("g")
            .attr("class", "region")
            .selectAll("path")
            .data(topojson.feature(map, map.objects.collection).features)
            .enter().append("path")
            .attr("d", path)

            .style("opacity", 0.8)
        console.log(i);
        i++;
    }
</script>
</body>
</html>

Как мне кажется, проблема именно с координатами, потому что пробовал в этот же код ставить координаты просто карты России с других источник и там все норм.

Answer 1

Изгиб сверху появляется за счет проекции. Попробуйте изменить вариант проекции на другие или убрать фон. Варианты проекций можно посмотреть тут: https://d3js.org/d3-geo Конкретно для этой карты подходит ConicConformal.

Плюс у Кавказа нужно перевернуть порядок координат, чтобы не было инверсии.

var projection = d3.geo.mercator()
        .rotate([-105, 0])
        .center([-10, 65])
        .parallels([52, 64])
        .scale(700)
        .translate([width / 2, height / 2]);

БЛОГ НА HUSL

Визуализация Федеральных округов России через d3.js

Ответы (1 шт):