Сделайте карту океана D3 версии 5, как карту океана D3 версии 3 - PullRequest
Новая
       4

Сделайте карту океана D3 версии 5, как карту океана D3 версии 3

1 голос
/ 11 июля 2020

Как сделать так, чтобы область океана оставалась белым фоном с помощью d3. js версии 5? Я использую то, что есть на этой странице bl.ocks.org, но с другой версией. Она использует версию 3, а я - версию 5. У меня две страницы: одна использует версию 3 здесь , а другая - версию 5 здесь . CSS и HTML одинаковы для обоих. Единственное отличие - версия D3. Как сделать так, чтобы часть океана в версии 5 выглядела так же, как в версии 3, где часть океана белая? Спасибо.

Вот что мои css и js настроены для карт. 

<style type="text/css">

            svg {
                background-color: white;
            }

            h1 {
                color: rgb(115, 115, 115);
                font-size: 18px;
                font-family: sans-serif;
                font-weight: bold;
                margin: 0;
                padding-bottom: 10px;

            }

            #container {
                width: 90%;
                margin-left: auto;
                margin-right: auto;
                margin-top: 20px;
                padding: 20px;
                background-color: white;
                box-shadow: 1px 1px 1px 2px rgb(217, 217, 217);
            }

            path:hover {
                fill: rgba(157, 197, 243, 0.911);
                cursor:pointer;
            }



        </style>
    </head>
    <body>


    <div id="container">

    </div>
        

        <script type="text/javascript">



            //Width and height
            var w = 800;
            var h = 600;

            //Define map projection


            var projection = d3.geoMercator() //utiliser une projection standard pour aplatir les pôles, voir D3 projection plugin
                                   .center([ 23, 42 ]) //comment centrer la carte, longitude, latitude
                                   .translate([ w/2, h/2 ]) // centrer l'image obtenue dans le svg
                                   .scale([ w/1.5 ]); // zoom, plus la valeur est petit plus le zoom est gros 

            //Define path generator
            var path = d3.geoPath()
                             .projection(projection);


            //Create SVG
            var svg = d3.select("#container")
                        .append("svg")
                        .attr("width", w)
                        .attr("height", h);

            //Load in GeoJSON data
            d3.json("data/ne_50m_admin_0_countries_simplified.json").then( function(json) {
                
                //Bind data and create one path per GeoJSON feature
                svg.selectAll("path")
                   .data(json.features)
                   .enter()
                   .append("path")
                   .attr("d", path)
                   .attr("stroke", "rgba(8, 81, 156, 0.2)")
                   .attr("fill", "rgba(8, 81, 156, 0.6)");
        
            });


        
        </script>
    </body>

1 Ответ

0 голосов
/ 11 июля 2020

Поскольку вы работаете с svg & paths, нацеливание на океан с помощью селекторов css и отсутствие влияния на другие вещи без добавления к нему идентификатора или класса будет очень непрактично (теоретически вы можете увидеть, сохраняет ли он ту же позицию в svg group [x] и нацелите его селектором: nth-child (x), затем перезапишите свойство: hover fill, но это не кажется лучшим способом)

У него уже есть другой цвет, так что в какой-то момент он явно действует сам по себе. Я бы попытался найти, где это изменено в JS, и посмотреть, есть ли вариант, который вы могли бы передать за океан. Функция d3 .geo кажется хорошим местом для поиска, а также для просмотра json, которое вы проходите.

Потенциально полезные ссылки:

https://www.tutorialspoint.com/d3js/d3js_geographies.htm

Изменить цвет на карте D3

Извините, я не смог вам прямо ответить, но я тоже новичок в d3, и я ' м тоже любопытно по этому поводу. Если вы поймете, как это сделать, мы будем очень признательны, если вы разместите свое открытие здесь :)

РЕДАКТИРОВАТЬ: Думаю, я что-то нашел! Я все еще работаю над быстрой настройкой, чтобы проверить это, но я думаю, что делаю это так: 

.style("stroke", (feature) => {
            if (feature.continent != "Seven seas (open ocean)"){ return "rgba(8, 81, 156, 0.2)"}
            else {return "rgba(255, 255, 255, 0.2)"}
        })
.style("fill", (feature) => {
            if (feature.continent != "Seven seas (open ocean)"){ return "rgba(8, 81, 156, 0.6)"}
            else {return "rgba(255, 255, 255, 0.6)"}
        })
.classed("ocean-area", (feature) => {
            if (feature.continent != "Seven seas (open ocean)"){ return true}
            else {return false}
        });

вместо этого: 

.attr("stroke", "rgba(8, 81, 156, 0.2)")
.attr("fill", "rgba(8, 81, 156, 0.6)")

где вы связываете, вы data и создание путей, должно работать . Он должен отфильтровать, является ли свойство объекта continent (в данных json) «открытым океаном» и вернуть тот или иной цвет, а затем сделать то же самое, чтобы добавить класс в область океана и перезаписать стиль: hover с помощью этот CSS селектор

http://www.d3noob.org/2013/01/select-items-with-if-statement-in-d3js.html

Последнее изменение:

Я слишком ужасен в d3, чтобы даже получить локальную копию этого работает: / но сравнивая пример с вашим, я вижу, что в примере на самом деле нет заливки над океаном. Присмотревшись к вашему, я вижу, что над океаном есть заливка, а также некоторые не имеющие выхода к морю пятна, которые являются частью той же заливки и поэтому меняют цвет, когда парят с ней над океаном. Это заставляет меня думать, что это связано с вводимыми данными или даже со способом форматирования данных. Но после всего дня я сдаюсь, так что удачи и спасибо следующему человеку!

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...