如何使用d3创建响应地图 [英] How to create a responsive map using d3

问题描述

我想让我的地图回应，所以它会根据浏览器窗口大小调整大小。这是我到目前为止，

I'm trying to make my map responsive, so it'd be resized according to the browser window size. This is what I have so far,

style.css

style.css

#mapbox {
border:2px solid #000;
width:960px;
height:550px;
background:#FFFFFF;
}

viz.js

var margin = {top: 10, left: 10, bottom: 10, right: 10},
width = parseInt(d3.select('#mapbox').style('width')), 
width = width - margin.left - margin.right, 
mapRatio = .5, 
height = width * mapRatio;
.
.
d3.select(window).on('resize', resize);
.
.
function resize(){  
    width = parseInt(d3.select('#mapbox').style('width'));
    width = width - margin.left - margin.right;
    height = width * mapRatio;


        projection.translate([width / 2, height / 2])
                .scale(width);

        svg.style('width', width + 'px')
            .style('height', height + 'px');

}

当我调整窗口大小时，和高度为我的svg容器。我想这是因为，在调整大小功能，我从CSS中得到的宽度和高度，这将是相同的，无论我调整窗口的权利吗？

When I resize the window, its still keeping the same width and height for my svg container. I guess thats because, in resize function, I'm getting the width and height from the CSS which will be the same whether I resize the window right?

卡在这里，我缺少什么明显吗？

I'm stuck here, am I missing anything obvious? would be great if you have any pointers for me to get this working.

我几乎遵循以下的示例，

推荐答案

我设置svg像这样有一个响应调整大小：

I set the svg like so to have a responsive resize:

var svg = d3.select("body")
        .append("div")
        .attr("id", "svg")
        .append("svg")
        .attr("viewBox", "0 0 " + width + " " + height )
        .attr("preserveAspectRatio", "xMinYMin");

然后设置css如下：

#svg {
    width:100%;
    height: auto;
}

这篇关于如何使用d3创建响应地图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！