Plotly.js Choropleth 地图大小 [英] Plotly.js Choropleth map size

问题描述

我正在尝试制作等值线地图，但如何设置地图的大小?现在我有这张地图:我想将地图扩展到所有空间，我阅读了文档，但没有找到解决方案.

I'm trying to make a choropleth map, but how can I set the size of the map? Now I've this map: I would like expand the map to all the space, I read the documentations but I didn't find a solution.

这是我的代码:

var data = [{
    type: 'choropleth',
    locationmode: 'country names',
    locations: unpack(output, 'label'),
    z: unpack(output, 'nres'),
    text: unpack(output, 'nres')
}];
var layout = {
    geo: {
        projection: {
            type: 'equirectangular'
        }
    }
};
Plotly.plot(mapChoropleth, data, layout, {
    showLink: false
});

推荐答案

Plotly 尝试在不改变图像比例的情况下占用所有可用空间.如果你有一个非常宽的 div，那么由于左右两边会有很多空白空间，但它会从上到下被填充.

Plotly tries to take all the available space without changing the image ratio. If you have a very wide div there will be a lot of empty space to left and right due but it will be filled from the top to the bottom.

您可以更改layout中的height和width，更改边距并微调彩条以获得所需的结果.

You could change height and width in layout, change the margins and fine tune the color bar to get the desired result.

Plotly.d3.csv('https://raw.githubusercontent.com/plotly/datasets/master/2014_world_gdp_with_codes.csv', function(err, rows) {
    function unpack(rows, key) {
        return rows.map(function(row) {
            return row[key];
        });
    }

    var data = [{
        type: 'choropleth',
        locations: unpack(rows, 'CODE'),
        z: unpack(rows, 'GDP (BILLIONS)'),
        text: unpack(rows, 'COUNTRY'),
        colorscale: [
            [0, 'rgb(5, 10, 172)'],
            [0.35, 'rgb(40, 60, 190)'],
            [0.5, 'rgb(70, 100, 245)'],
            [0.6, 'rgb(90, 120, 245)'],
            [0.7, 'rgb(106, 137, 247)'],
            [1, 'rgb(220, 220, 220)']
        ],
        autocolorscale: false,
        reversescale: true,
        marker: {
            line: {
                color: 'rgb(180,180,180)',
                width: 0.5
            }
        },
        tick0: 0,
        zmin: 0,
        dtick: 1000,
        colorbar: {
            autotic: false,
            tickprefix: '$',
            len: 0.8,
            x: 1,
            y: 0.6
        }
    }];

    var layout = {
        width: 300,
        height: 300,
        geo: {
            showframe: false,
            showcoastlines: false,
            scope: 'europe',
            projection: {
                type: 'mercator',
            },

        },
        margin: {
            l: 0,
            r: 0,
            b: 0,
            t: 0,
            pad: 2
        }
    };
    Plotly.plot(myDiv, data, layout, {
        showLink: false
    });
});

<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<div id="myDiv"></div>

您也可以直接更改地图的比例，这是一种丑陋但可行的可能性.

You can also change the ratio of the map directly, an ugly but working possibility.

var c = document.getElementsByClassName('countries')[0];
c.setAttribute('transform', 'translate(-300), scale(3, 1)');
c = document.getElementsByClassName('choropleth')[0];
c.setAttribute('transform', 'translate(-300), scale(3, 1)');
c = document.getElementsByClassName('clips')[0].firstChild.firstChild;
c.setAttribute('x', -300);
c.setAttribute('width', 900);

地图先正常绘制，点击后调整大小.

The map is first drawn normally and then resized when clicked on.

var myPlot = document.getElementById('myDiv');
var data = [];
var layout = {};

Plotly.d3.csv('https://raw.githubusercontent.com/plotly/datasets/master/2014_world_gdp_with_codes.csv', function(err, rows) {
    function unpack(rows, key) {
        return rows.map(function(row) {
            return row[key];
        });
    }

    data = [{
        type: 'choropleth',
        locations: unpack(rows, 'CODE'),
        z: unpack(rows, 'GDP (BILLIONS)'),
        text: unpack(rows, 'COUNTRY'),
        colorscale: [
            [0, 'rgb(5, 10, 172)'],
            [0.35, 'rgb(40, 60, 190)'],
            [0.5, 'rgb(70, 100, 245)'],
            [0.6, 'rgb(90, 120, 245)'],
            [0.7, 'rgb(106, 137, 247)'],
            [1, 'rgb(220, 220, 220)']
        ],
        autocolorscale: false,
        reversescale: true,
        marker: {
            line: {
                color: 'rgb(180,180,180)',
                width: 0.5
            }
        },
        tick0: 0,
        zmin: 0,
        dtick: 1000,
        colorbar: {
            autotic: false,
            tickprefix: '$',
            len: 0.8,
            x: 1,
            y: 0.6
        }
    }];

    layout = {
        width: 1200,
        height: 400,
        geo: {
            showframe: false,
            showcoastlines: false,
            scope: 'europe',
            projection: {
                type: 'mercator',
                scale: 1
            },

        },
        margin: {
            l: 0,
            r: 0,
            b: 0,
            t: 0,
            pad: 2
        }
    };
        Plotly.plot(myPlot, data, layout, {
        showLink: false
    });
    myPlot.on('plotly_click', function(){

        var c = document.getElementsByClassName('countries')[0];
        c.setAttribute('transform', 'translate(-300), scale(3, 1)');
        c = document.getElementsByClassName('choropleth')[0];
        c.setAttribute('transform', 'translate(-300), scale(3, 1)');
        c = document.getElementsByClassName('clips')[0].firstChild.firstChild;
        c.setAttribute('x', -300);
        c.setAttribute('width', 900);
    })

});

<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<div id="myDiv" style="x: 0"></div>

这篇关于Plotly.js Choropleth 地图大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！