Карта d3.js () автоматически вписывается в родительский контейнер и изменяет размер в окне ⇐ CSS

[Anonymous]

Я создаю панель мониторинга и использую d3.js для добавления карты мира, на которой твиты будут отображаться в реальном времени в зависимости от географического местоположения.
The world.json< Файл /em>, указанный в строке d3.json(), можно загрузить ЗДЕСЬ (он называется world-countries.json).

Карта находится на странице в формате SVG контейнере и отображается с помощью d3.
Ниже приведены соответствующие фрагменты кода.

Код: Выделить всё

Код: Выделить всё

#mapContainer svg {
display:block;
margin:0 auto;
}
#mapContainer path {
fill:#DDD;
stroke:#FFF;
}

Код: Выделить всё

// generate US plot
function draw() {
var map = d3.select("svg");
var width = $("svg").parent().width();
var height = $("svg").parent().height();

var projection = d3.geo.equirectangular().scale(185).translate([width/2, height/2]);
var path = d3.geo.path().projection(projection);
d3.json('plugins/maps/world.json', function(collection) {
map.selectAll('path').data(collection.features).enter()
.append('path')
.attr('d', path)
.attr("width", width)
.attr("height", height);
});
}
draw();
latestLoop();

Код: Выделить всё

$(window).resize(function() {
draw();
});

Я масштабировал карту до приемлемого размера (для моего конкретного размера браузера), но она по-прежнему не масштабируется и не центрируется при изменении размера окна. Однако если я изменю размер окна и нажму «Обновить», карта будет центрирована после перезагрузки страницы. Однако, поскольку масштаб статический, он не масштабируется должным образом.



Подробнее здесь: https://stackoverflow.com/questions/142 ... ith-window