我是D3js的新手，我正在尝试使用此jsfiddle显示的d3js创建世界地图
https://jsfiddle.net/7onjd1pf/
我想要实现的是根据浏览器大小调整大小的世界地图，当您点击某个国家/地区时，会打开一个新的弹出窗口，其中包含该国家/地区的地图和其他一些信息。
如果我从较大的屏幕尺寸（1000px +）开始并且无论我多么小就完全调整大小，这都可以。但是如果我在小屏幕上加载页面，则地图无法正确加载。我观察到由于某种原因，带有id＆＃34;国家＆＃34;的g元素始终以900+ px的宽度开始，并且不响应内联attrs中显示的尺寸。我指定的尺寸确实显示内联attrs，但计算的宽度从其他位置开始，如果不是，则调整到屏幕大小我在较小的屏幕尺寸上刷新浏览器。因此，如果我在较小的屏幕尺寸上加载页面，则地图地图显示太大。如果我从一个大屏幕开始并将窗口调整到较小的屏幕，它工作正常。不知道这里发生了什么。有人可以解释一下我是如何做到这一点的吗？
提前感谢您的帮助。
这是代码
HTML：
<
body>
<div class="container">
<div class="row">
<div id="map_container" class="col-xs-12"></div>
<div id="profile" class="col-xs-10">
<div id="country_map" class="col-xs-4"></div>
<button type="button" class="close" aria-label="Close" id="close_map">
<span aria-hidden="true">×</span>
</button>
<div id="writeup" class="col-xs-8 of">
<h1>Heading 1</h1>
<p>
<span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure, pariatur, quia! Suscipit voluptas, cumque esse numquam dolore quo maxime blanditiis unde ex pariatur id qui minima autem voluptates ducimus dicta.</span>
<span>Suscipit corporis ex, optio, et libero accusantium dolorum animi. Dolorem unde ratione quas facere eum dolore veritatis ad aliquam repudiandae id expedita minima numquam magnam necessitatibus tenetur nulla, esse soluta!</span>
<span>Voluptas consectetur totam debitis! Et velit alias, quod sed ut labore iusto assumenda numquam, voluptas repellat aliquam quis nemo maxime officiis sunt architecto minus fugit magnam explicabo deleniti voluptates! Accusantium.</span>
<span>Quisquam asperiores, voluptatibus quod incidunt facilis pariatur tenetur quae libero accusantium itaque modi nobis odio. Id pariatur eius doloremque, voluptatem tenetur repudiandae nulla enim sint consectetur vitae non, voluptatibus a.</span>
</p>
</div>
<div id="writeup2" class="col-xs-4">
<h1>Heading 2</h1>
<p>
<span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure, pariatur, quia! Suscipit voluptas, cumque esse numquam dolore quo maxime blanditiis unde ex pariatur id qui minima autem voluptates ducimus dicta.</span>
<span>Suscipit corporis ex, optio, et libero accusantium dolorum animi. Dolorem unde ratione quas facere eum dolore veritatis ad aliquam repudiandae id expedita minima numquam magnam necessitatibus tenetur nulla, esse soluta!</span>
<span>Voluptas consectetur totam debitis! Et velit alias, quod sed ut labore iusto assumenda numquam, voluptas repellat aliquam quis nemo maxime officiis sunt architecto minus fugit magnam explicabo deleniti voluptates! Accusantium.</span>
<span>Quisquam asperiores, voluptatibus quod incidunt facilis pariatur tenetur quae libero accusantium itaque modi nobis odio. Id pariatur eius doloremque, voluptatem tenetur repudiandae nulla enim sint consectetur vitae non, voluptatibus a.</span>
</p>
</div>
<div class="col-xs-8 table-responsive of">
<table class="table">
<thead>
<tr>
<th>#</th>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
<th>City</th>
<th>Country</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Anna</td>
<td>Pitt</td>
<td>35</td>
<td>New York</td>
<td>USA</td>
</tr>
<tr>
<td>2</td>
<td>Bruce</td>
<td>Wayne</td>
<td>35</td>
<td>Gotham</td>
<td>USA</td>
</tr>
<tr>
<td>3</td>
<td>Clarke</td>
<td>Kent</td>
<td>35</td>
<td>Metroplis</td>
<td>USA</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</body>
CSS：
/*world map*/
#map_container,
#country_map {
height: 80vh;
padding: 20px;
}
.graticule {
fill: none;
stroke: #777;
stroke-width: 0.5px;
stroke-opacity: 0.5;
}
.land {
fill: #222;
}
.boundary {
fill: none;
stroke: #fff;
stroke-width: 0.5px;
}
#profile {
height: 80vh;
background: white;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: none;
overflow: auto;
}
#country_map,
#writeup {
height: 50%;
/*position: relative;
top: 0;
left: 0;*/
}
#writeup2 {
height: 50%;
}
.of {
overflow: auto;
}
[tooltip]:before {
font-family: 'Roboto';
font-weight: 600;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
background-color: #585858;
color: #fff;
content: attr(tooltip);
font-size: 12px;
visibility: hidden;
opacity: 0;
padding: 5px 7px;
margin-right: 10px;
position: absolute;
right: 100%;
bottom: 5%;
white-space: nowrap;
}
[tooltip]:hover:before,
[tooltip]:hover:after {
visibility: visible;
opacity: 1;
}
div.toolTip p {
text-align: left;
}
.toolTip {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
position: absolute;
display: none;
width: auto;
height: auto;
background: none repeat scroll 0 0 white;
border: 0 none;
border-radius: 8px 8px 8px 8px;
box-shadow: -3px 3px 15px #888888;
color: black;
font: 12px sans-serif;
padding: 5px;
text-align: center;
}
JS（从下面的代码中删除了country_data，但可以在jsfiddle链接中查看）：
$(function() {
var data,
map = document.getElementById("map_container"),
inital_width = map.offsetWidth,
map_width = map.offsetWidth,
map_height = map_width * .618,
color = d3.scale.category20c(),
xy = d3
.geo
.mercator()
.translate([map_width / 2, 450]),
path = d3
.geo
.path()
.projection(xy),
svg = d3
.select('#map_container')
.append('svg:svg'),
countries = svg
.append('svg:g')
.attr('id', 'countries');
/* World Map */
function make_map(){
console.log("here")
map_width = map.offsetWidth;
map_height = map_width*.618//map.offsetHeight;
console.log(map_height,map_width,inital_width)
svg
.attr("width",map_width * .9)
.attr("height",map_height * .9);
countries
.attr('width',map_width* .7)
.attr('height',map_height* .7)
.attr("transform", "scale(" + map_width/inital_width + ")");
countries.selectAll('path')
.data(countries_data.features)
.enter()
.append('svg:path')
.attr('d', path)
.attr("class","country")
.attr('fill', "gray")
}
make_map();
var country = d3.selectAll(".country");
var div = d3.select("body").append("div")
.attr("class", "toolTip");
country.on("mousemove",function(d){
d3.select(this).attr({
'fill':"lightblue"
})
div.style("left", d3.event.pageX+10+"px");
div.style("top", d3.event.pageY-25+"px");
div.style("display", "inline-block");
div.html(d.properties.name)
})
country.on("mouseout",function(d){
d3.select(this).attr({
'fill': 'gray'
})
div.style("display", "none");
})
var country_map_div = document.getElementById("country_map"),
profile = $('#profile'),
w2 = profile.width() * 4/12,
h2= profile.height() * .5,
close_map = d3.select("#close_map"),
xy2 = d3.geo.equirectangular(),
selection,
country_map = d3.select("#country_map")
.append('svg:svg')
.attr('width',w2)
.attr('height',h2 )
.attr("id","country_map_svg");
country.on("click", clicked);
function clicked(d){
selection = d;
country_map.selectAll("path").remove();
w2 = profile.width() * 4/12;
h2= profile.height() * .5;
var bounds = path.bounds(d),
dx = bounds[1][0] - bounds[0][0],
dy = bounds[1][1] - bounds[0][1],
x = (bounds[0][0] + bounds[1][0]) / 2,
y = (bounds[0][1] + bounds[1][1]) / 2,
scale = .9 / Math.max(dx / w2, dy / h2),
translate = [w2 / 2 - scale * x, h2 / 2 - scale * y];
country_map
.append("path")
.datum(d)
.attr('id',"c_map")
.attr("d",path)
.attr("fill",function(d) { return color(d.properties.name);})
.attr("transform", "translate(" + translate + ")scale(" + scale + ")");
profile.show(300);
}
close_map.on("click",function(d){
profile.hide();
})
var win = d3.select(window);
win.on("resize", sizeChange);
function sizeChange(element,id) {
map_width = map.offsetWidth;
map_height = map_width * .618;
countries
.attr("transform", "scale(" + map_width/inital_width + ")")
.attr("height",map_height);
var bounds = path.bounds(selection),
dx = bounds[1][0] - bounds[0][0],
dy = bounds[1][1] - bounds[0][1],
x = (bounds[0][0] + bounds[1][0]) / 2,
y = (bounds[0][1] + bounds[1][1]) / 2,
w2 = $("#profile").width() *4/12,
h2 = $("#profile").height()*.5,
scale = .9 / Math.max(dx / w2, dy / h2),
translate = [w2 / 2 - scale * x, h2 / 2 - scale * y];
country_map.attr("width", w2 )
.attr("height", h2)
country_map.select("path")
.attr("transform", "translate(" + translate + ")scale(" + scale + ")");
}
});
PS。提前道歉，将地图路径所需的所有数据转储放在js的顶部。我在第一时间使用jsfiddle并且无法计算我如何将它放在一个单独的js文件中。
答案 0 :(得分：0)
第一次没有设置比例时附加国家/地区。因此，您使用默认比例。 d3中墨卡托投影的默认比例为931/Tau（Tau =2π）。这需要360度的地球经度（或2π弧度）并在水平方向上传播超过961像素。这意味着地图只能正确显示宽度为961像素或更多（或960像素，这是bl.ocks.org的默认宽度）。这解释了这句话：
如果我从较大的屏幕尺寸（1000px +）开始，这可以正常工作 无论我多么小，都能完美地调整大小。
你不是通过重新缩放投影来调整地图的大小，而是通过直接修改svg，这就是为什么当像素宽度大约为1000时调整大小的时候
您需要设置投影比例。您需要知道所需的地图宽度才能这样做。您希望将g宽度设置为svg的70％，将svg设置为变量map_width的90％，因此您的比例看起来像：
.scale(map_width/(Math.PI*2)*0.9*0.7)
这将在预期的像素数量上包裹360度经度。
注意，您还应该更新投影的.translate属性（例如，y偏移固定为450px），因为它也将相对于地图宽度和高度 - 这将正确居中你在窗口内的地图。
以下是更新的fiddle。
为什么弹出功能会正常显示？因为您在以下代码中设置了比例（和边界）：
var bounds = path.bounds(d),
dx = bounds[1][0] - bounds[0][0],
dy = bounds[1][1] - bounds[0][1],
x = (bounds[0][0] + bounds[1][0]) / 2,
y = (bounds[0][1] + bounds[1][1]) / 2,
scale = .9 / Math.max(dx / w2, dy / h2),
您可以使用它来正确设置投影，该投影至少包括缩放和平移属性。这就是为什么代码的这部分与基本地图形成对比的原因。