D3 geoPath: шестиугольник геоджон не рендерится должным образом. (Другой geojson работает с тем же кодом.) - PullRequest
Новая
       28

D3 geoPath: шестиугольник геоджон не рендерится должным образом. (Другой geojson работает с тем же кодом.)

0 голосов
/ 04 октября 2019

Обновление: я решил это, загрузив (в R) Hex hexmap geojson (, используя sf ), повторно сохранив его как шейп-файл, перезагрузив в R и сохранив как geojson. (Я ранее загрузил геойсон в R и сразу же заново сохранил подраздел.)

Помимо небольших различий в сохраненных координатах, два файла геоджона выглядят одинаково для меня. Если кто-то может определить причину, по которой этот будет работать в приведенном ниже коде D3, а этот - нет, было бы хорошо услышать!

Я пытаюсь визуализировать геойсон в D3 (версия 5) с шестнадцатеричной карты местных органов власти Великобритании . Геопаты, создаваемые из шестиугольников, ошибочны, и я не могу понять, в чем проблема. (Его geojson здесь .)

Я тестировал тот же кусок кода D3 с использованием другого geojson - это прекрасно работает. Я включил приведенный ниже код и примеры одиночных геозон-зон - той, которая работает, и одного шестиугольника геоджона, которая не работает. (Он также работает с многозонным геойсоном.)

Другие вещи, которые я проверял: шестиугольник Джеойсон имеет правильную проекцию и расположен там, где и должен быть. Это делает во всем остальном, что я использовал. Я даже вытащил координаты геойсона и нанес их на R, чтобы убедиться, что они шестиугольники.

Полученные пути SVG странные: слишком длинные, производя перекрывающиеся квадраты. (См. Пример пути ниже.)

Вероятно, это будет что-то смущающе очевидным - но кто-нибудь понял, почему этот геоджон некорректно рендерится?

Код: 

d3.json("data/hexmap-lad-england.geojson").then(function (data) {

        englandgeofeatures = data

        width = 500
        height = 500

        //Getting the map centred.
        //https://stackoverflow.com/questions/28141812/d3-geo-responsive-frame-given-a-geojson-object/28142611#28142611
        //unit projection to start with
        var projection = d3.geoMercator()
                .scale(1)
                .translate([0, 0]);

        // create a path generator.
        ladpath = d3.geoPath()
                .projection(projection);

        var b = ladpath.bounds(data),
                s = .95 / Math.max((b[1][0] - b[0][0]) / width, (b[1][1] - b[0][1]) / height),
                t = [(width - s * (b[1][0] + b[0][0])) / 2, (height - s * (b[1][1] + b[0][1])) / 2];
        // Update the projection to use computed scale & translate.
        projection
                .scale(s)
                .translate(t);

        //D3
        var engmap = d3.select("g.enghexmap")
                .selectAll("path")
                .data(englandgeofeatures.features, function (d) {
                    return (d.properties.c)
                })

        engmap.enter().append("path")
                .attr("id", function (d, i) {
                    return("lad_index" + i)
                })
                .attr("class", "eng_path")
                .attr("d", ladpath)
                .merge(engmap)
                .style("fill", function (d) {
                    return(left_colours(d.properties.r))
                })

    });

Этот геойсон (из одной зоны в Шеффилде) правильно отображает, используя этот код: 

{
"type": "FeatureCollection",
"name": "sheflsoas_singlezone",
"crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },
"features": [
{ "type": "Feature", "properties": { "name": "Sheffield 027C", "code": "E01007905", "LAD17CD": "E08000019", "LAD17NM": "Sheffield", "DateCode": 2019, "Measurement": "Rank", "Units": null, "Value": 2213, "Indices of Deprivation": "a. Index of Multiple Deprivation (IMD)" }, "geometry": { "type": "MultiPolygon", "coordinates": [ [ [ [ -1.417363349649532, 53.393379061360619 ], [ -1.420449375993976, 53.392027790856602 ], [ -1.419635813430933, 53.391478649241712 ], [ -1.419036833994228, 53.391165753207652 ], [ -1.418706237203488, 53.391363136803221 ], [ -1.418225053312692, 53.391275033046462 ], [ -1.418251118957702, 53.390630202518295 ], [ -1.418371479110983, 53.390314098590018 ], [ -1.418719158795558, 53.389333226619449 ], [ -1.419402619582918, 53.388999006673274 ], [ -1.418984961350027, 53.388962594093698 ], [ -1.419181284640567, 53.388087545429876 ], [ -1.419482165424914, 53.387866411710981 ], [ -1.421624273569015, 53.388454408304383 ], [ -1.425035212687137, 53.389225827495267 ], [ -1.425711799886983, 53.389327193927478 ], [ -1.428955130815773, 53.389858379630546 ], [ -1.427237909612598, 53.391736958135404 ], [ -1.42524841833601, 53.393593986421784 ], [ -1.422527366029956, 53.392927735659462 ], [ -1.419329355432445, 53.394772893763161 ], [ -1.417823143737923, 53.39383525040467 ], [ -1.417363349649532, 53.393379061360619 ] ] ] ] } }
]
}

Этот геойсон (из одного шестиугольника из шестнадцатеричной карты) не: 

{
"type": "FeatureCollection",
"name": "hexmap-lad-sheffield",
"crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },
"features": [
{ "type": "Feature", "properties": { "q": 12, "c": "E08000019", "r": 17, "g": "YH", "n": "Sheffield" }, "geometry": { "type": "Polygon", "coordinates": [ [ [ -1.846671970819813, 53.755295282497386 ], [ -1.717699203163628, 53.829757744621816 ], [ -1.717699203163628, 53.978682668870661 ], [ -1.846671970819813, 54.053145130995091 ], [ -1.975644738475998, 53.978682668870661 ], [ -1.975644738475998, 53.829757744621816 ], [ -1.846671970819813, 53.755295282497386 ] ] ] } }
]
}

Путь SVG, который создает шестнадцатеричный геоджон, длинный и, казалось бы, близок к одному и тому же объекту:

образ пути

...