Ожидаемый: размер карты цветопередачи должен коррелировать с размером экрана.
Фактически: размеры карты корректны, когда браузер маленький и, кажется, увеличивается с ростом экрана браузера. Но тогда, когда браузер достигает ширины около 900 пикселей, карта возвращается к маленькому экрану.
Я использую viewBox
, и это соответствующий код:
MapChart.prototype.initVis = function() {
let vis = this;
vis.myProjection = d3
.geoMercator()
.scale(2500)
.precision(0.1)
.translate([vis.dimensions.width / 3, vis.dimensions.height / 2])
.center([67, 30]);
vis.myPathGenerator = d3.geoPath().projection(vis.myProjection);
// Define the div for the tooltip
vis.div = d3
.select("body")
.append("div")
.attr("class", "tooltip")
.style("opacity", 0);
vis.svg = d3
.select(vis.parentElement)
.append("svg")
.attr("class", "card")
.attr("viewBox", `0 0 800 800`);
// .attr("width", vis.dimensions.width) >>> old code that is being replaced with viewBox code
// .attr("height", vis.dimensions.height); >>> old code that is being replaced with viewBox code
//more code
.
.
.
}
Если это полезно, это весь проект: https://github.com/SabahatPK/DataDrivenPakistan. Это рабочая версия, поэтому в ней нет строки кода viewBox
, но все остальное точно так же.