Карты данных: D3 js: проблема проецирования и масштабирования для мобильных адаптивных карт - PullRequest
Новая
       18

Карты данных: D3 js: проблема проецирования и масштабирования для мобильных адаптивных карт

0 голосов
/ 26 марта 2020

Я пытаюсь удалить дополнительное пространство вокруг моей отрисованной векторной карты, я также прикрепляю изображение, мне нужно удалить дополнительную область вокруг карты (красного цвета) из моего рендера. Я пробовал различные настройки в масштабе и переводе, также меняя размер моего элемента / контейнера. Но это не работает! Мой код, как показано ниже:! [Карта выпуска Изображение для справки] (https://www.covidtrack.in/img/datamaps_issue.png

<div id="india" style="position: relative; width: 900px; height: 900px; background: #cccdc9"></div>


    <script>
            var bubble_map = new Datamap({
                element: document.getElementById('india'),
                scope: 'india',
                responsive: true,
                //height: 600,
                //width: 600,
                geographyConfig: {
                    popupOnHover: true,
                    highlightOnHover: true,
                    borderColor: '#444',
                    borderWidth: 0.9,
                    dataUrl: 'js/india.topo.json'
                    //dataJson: topoJsonData
                },
                fills: {
                    'MAJOR': '#306596',
                    'MEDIUM': '#0fa0fa',
                    'MINOR': '#bada55',
                    defaultFill: '#999999'
                },
                data: {
                    'JH': { fillKey: 'MINOR' },
                    'MH': { fillKey: 'MAJOR' }
                },
                setProjection: function (element) {
                    var projection = d3.geo.mercator()
                        //.center([83, 10])
                        .center([78.9629, 23.5937]) // always in [East Latitude, North Longitude]
                        .scale(1000)
                        //.scale(900)
                        .translate([element.offsetWidth / 2, element.offsetHeight / 2]);

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

                    return { path: path, projection: projection };
                }
            });

            let bubbles = [
                {
                    centered: "MH",
                    fillKey: "MAJOR",
                    radius: 20,
                    state: "Maharastra"
                },
                {
                    centered: "AP",
                    fillKey: "MAJOR",
                    radius: 22,
                    state: "Andhra Pradesh"
                },
                {
                    centered: "TN",
                    fillKey: "MAJOR",
                    radius: 16,
                    state: "Tamil Nadu"
                },
                {
                    centered: "WB",
                    fillKey: "MEDIUM",
                    radius: 15,
                    state: "West Bengal"
                },
                {
                    centered: "MP",
                    fillKey: "MEDIUM",
                    radius: 15,
                    state: "Madhya Pradesh"
                },
                {
                    centered: "UP",
                    fillKey: "MINOR",
                    radius: 8,
                    state: "Uttar Pradesh"
                },
                {
                    centered: "RJ",
                    fillKey: "MINOR",
                    radius: 7,
                    state: "Rajasthan"
                }

            ]

            console.log(bubble_map);


            setTimeout(() => { // only start drawing bubbles on the map when map has rendered completely.

                bubble_map.bubbles(bubbles, {
                    popupTemplate: function (geo, data) {
                        return `<div class="hoverinfo">city: ${data.state}, Slums: ${data.radius}%</div>`;
                    }
                });
            }, 1000);
        </script>


  [1]: https://covidtrack.in/img/datamaps_issue.png
...