相关疑难解决方法(0)

更新:我已经在答案部分发布并接受了一个完整的解决方案.本节中的任何代码都将用作与您自己的非工作代码进行比较的参考,但不能用作解决方案.

我正在构建一个仪表板并使用d3.js添加一个世界地图,该地图将根据地理位置实时绘制推文.

d3.json()行中引用的world.json文件可以在这里下载(它叫做world-countries.json).

该地图作为SVG容器在页面上,并使用d3呈现.

以下是相关的代码片.

<div id="mapContainer">
    <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="500"></svg>
</div>

#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();
});

更新:我已将地图缩放到可接受的大小(对于我的特定浏览器大小),但是当我更改窗口大小时,它仍然不会缩放和居中.但是,如果我调整窗口大小,然后点击刷新,则重新加载页面后地图将居中.但是,由于比例是静态的,因此不能正确缩放.