移动响应Javascript地图

Question

我一直致力于此data map并尝试使其更具移动响应能力。问题是现在我似乎无法弄清楚如何改变它变得敏感的点。

这是地图正确缩放的最小点

如果我再将它移动1个像素，它会像这样重新调整尺寸

如何将重新调整大小边界设置为内容的10-20像素？

Answer 1

你可以使用原始Media Queries来解决这个问题，我试图向你展示你如何解决但你知道你是如何构建的，所以它只是虚拟。

你看到（最小宽度：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;