Plotly.js 等值线图大小

Question

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

这是我的代码：

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 尝试在不改变图像比例的情况下获取所有可用的 space。如果你有一个非常宽的 div 会有很多空的 space 到左边和右边，但它会从上到下填充。

您可以在 layout 中更改 height 和 width，更改边距并微调颜色栏以获得所需的结果。

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

});

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

Plotly.js 等值线图大小

Plotly.js Choropleth map size

plotly

choropleth