Plotly.js Choropleth地图大小

Question

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

这是我的代码：

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
});

Answer 1

Plotly尝试在不改变图像比率的情况下占用所有可用空间。如果你有一个非常宽的div，左右会有很多空的空间，但它会从顶部到底部填充。

您可以更改Name Code Date Value Name Code Date Sum A 101 3/10/17 1 A 101 3/10/17 9 A 101 3/10/17 2 A 102 3/10/17 4 B 102 3/10/17 1 B 101 3/10/17 3 B 101 3/10/17 3 B 102 3/10/17 2 C 102 3/8/17 2 B 101 3/8/17 2 A 102 3/10/17 1 C 102 3/8/17 2 B 101 3/8/17 2 C 102 3/10/17 1 A 102 3/10/17 3 B 102 3/10/17 1 A 101 3/10/17 2 A 101 3/10/17 4 C 102 3/10/17 1 中的height和width，更改边距并微调颜色条以获得所需的结果。

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];
        });
    }

    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>

首先正常绘制地图，然后点击时调整大小。

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);

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);
    })

});