Мобильный отзывчивый Javascript Map

Question

Я работаю над этим data map и стараюсь сделать его более мобильным. Проблема в том, что теперь я не могу понять, как изменить точку, в которой он становится отзывчивым.

Это самая маленькая точка, в которой карта правильно масштабируется

Если переместить его более 1 пиксель, она повторно размеры как этот

Как я могу установить ПЕРЕУСТАНОВКИ размер границы в пределах 10-20 пикселей содержимого?

Answer 1

вы можете использовать сырые Media Queries, чтобы решить эту проблему, я попытался показать вам, как вы можете решить, но вы знаете, как структурированы таким образом, его просто манекен.

Вы видите (min-width: 500px), это тот момент, который вы хотите установить.

<div class="min-range-1"> 
map goes here 
</div> 

<div class="min-range-2"> 
charts goes here 
</div> 


<style> 
@media only screen and (min-width: 500px) { 
/* For tablets: */ 
.min-range-1 {width: 8.33%;} 
.min-range-2 {width: 16.66%;} 
} 
@media only screen and (min-width: 768px) { 

.min-range-1 {width: 8.33%;} 
.min-range-2 {width: 16.66%;} 
} 

Answer 2

Добавьте следующий код под windows resize и добавить свои диаграммы к одному parent id, так что все остальные будут вычисляться динамически, без какого-либо перерыва.

var containerWidth = $("#yourChartId").parent().width(); // gets immediate parent width 
    var containerheight = $("#yourChartId").parent().height();// gets immediate parent height 

    // Give the below to parent svg 
    var margin = {top: 15, right: 15, bottom: 20, left: 40}, 
    width = containerWidth- margin.left - margin.right, 
    height = containerheight - margin.top - margin.bottom; 

    // Assign below widths and heights to respective children 

    var marginMap = {top: 5, right: 5, bottom: 10, left: 20} 
    widthMap = width/2 - marginMap.left - marginMap.right, 
    heightMap = height/2 - margin.top - margin.bottom; 

    var marginBargraphs = {top: 5, right: 5, bottom: 10, left: 20} 
    widthBargraphs = width/2 - marginBargraphs.left - marginBargraphs.right, 
    heightBargraphs = height/2 - marginBargraphs.top - marginBargraphs.bottom;