问题
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.This is my code:
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
});
回答1:
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.
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>
来源:https://stackoverflow.com/questions/42722495/plotly-js-choropleth-map-size