D3js 世界地图和 svg 组元素宽度的问题
trouble with D3js world map and svg group element width
我是 D3js 的新手，我正在尝试使用此 jsfiddle 中显示的 d3js 创建世界地图
https://jsfiddle.net/7onjd1pf/
我想要实现的是一张随浏览器大小调整大小的世界地图，当您单击一个国家/地区时，会打开一个新的弹出窗口，其中包含该国家/地区的地图和一些其他信息。
如果我从较大的屏幕尺寸 (1000px+) 开始并且无论我有多小都可以完美地调整大小 go.However 如果我先在小屏幕上加载页面，则地图无法正确加载。我观察到由于某种原因，带有 id "countries" 的 g 元素始终以 900+ px 的宽度开始，并且不响应显示在我指定的内联 attrs.The 维度中的维度确实显示了inline attrs 但计算的宽度从其他东西开始，如果我在较小的屏幕尺寸上刷新浏览器则不会调整到屏幕尺寸。结果，如果我在较小的屏幕尺寸上加载页面，则地图地图显示太大。如果我从大屏幕开始并将 window 的大小调整为较小的屏幕，它工作正常。不确定这里发生了什么。谁能解释一下我如何才能完成这项工作？
非常感谢您的帮助。
这是代码
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 link 中查看）：
$(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 文件中。
第一次添加您的国家/地区时，您没有设置比例。因此，您使用默认比例。 d3 中墨卡托投影的默认比例为 931/Tau (Tau = 2π)。这采用地球的 360 度经度（或 2π 弧度）并将它们水平分布在 961 个像素上。这意味着地图只有在宽度为 961 像素或更大（或 960 像素，这是 bl.ocks.org 的默认宽度）时才能正确显示。这解释了这个声明：
This works fine if I start at a larger screen size (1000px+) and
resizes perfectly no matter how small I go.
您调整地图大小不是通过重新缩放投影，而是通过直接修改 svg，这就是为什么从大约 1000[=20 像素宽度开始时调整大小有效的原因=]
您需要设置投影比例。为此，您需要知道所需的地图宽度。看起来您想将 g 宽度设置为 svg 的 70%，将 svg 设置为变量 map_width 的 90%，所以您的比例看起来像:
.scale(map_width/(Math.PI*2)*0.9*0.7)
这会将 360 度经度绕过预期的像素数量。
注意，您还应该更新投影的 .translate 属性（例如，当前 y 偏移量固定为 450px），因为它也会相对于地图宽度和高度 - 这将使您的地图在 window.
范围内正确居中
这是更新后的 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),
您可以使用它来正确设置投影，其中至少包括缩放和平移属性。这就是为什么您的这部分代码与底图相比能够按预期工作。
我是 D3js 的新手，我正在尝试使用此 jsfiddle 中显示的 d3js 创建世界地图
https://jsfiddle.net/7onjd1pf/
我想要实现的是一张随浏览器大小调整大小的世界地图，当您单击一个国家/地区时，会打开一个新的弹出窗口，其中包含该国家/地区的地图和一些其他信息。
如果我从较大的屏幕尺寸 (1000px+) 开始并且无论我有多小都可以完美地调整大小 go.However 如果我先在小屏幕上加载页面，则地图无法正确加载。我观察到由于某种原因，带有 id "countries" 的 g 元素始终以 900+ px 的宽度开始，并且不响应显示在我指定的内联 attrs.The 维度中的维度确实显示了inline attrs 但计算的宽度从其他东西开始，如果我在较小的屏幕尺寸上刷新浏览器则不会调整到屏幕尺寸。结果，如果我在较小的屏幕尺寸上加载页面，则地图地图显示太大。如果我从大屏幕开始并将 window 的大小调整为较小的屏幕，它工作正常。不确定这里发生了什么。谁能解释一下我如何才能完成这项工作？
非常感谢您的帮助。
这是代码
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 link 中查看）：
$(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 文件中。
第一次添加您的国家/地区时，您没有设置比例。因此，您使用默认比例。 d3 中墨卡托投影的默认比例为 931/Tau (Tau = 2π)。这采用地球的 360 度经度（或 2π 弧度）并将它们水平分布在 961 个像素上。这意味着地图只有在宽度为 961 像素或更大（或 960 像素，这是 bl.ocks.org 的默认宽度）时才能正确显示。这解释了这个声明：
This works fine if I start at a larger screen size (1000px+) and resizes perfectly no matter how small I go.
您调整地图大小不是通过重新缩放投影，而是通过直接修改 svg，这就是为什么从大约 1000[=20 像素宽度开始时调整大小有效的原因=]
您需要设置投影比例。为此，您需要知道所需的地图宽度。看起来您想将 g 宽度设置为 svg 的 70%，将 svg 设置为变量 map_width 的 90%，所以您的比例看起来像:
.scale(map_width/(Math.PI*2)*0.9*0.7)
这会将 360 度经度绕过预期的像素数量。
注意，您还应该更新投影的 .translate 属性（例如，当前 y 偏移量固定为 450px），因为它也会相对于地图宽度和高度 - 这将使您的地图在 window.
这是更新后的 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),
您可以使用它来正确设置投影，其中至少包括缩放和平移属性。这就是为什么您的这部分代码与底图相比能够按预期工作。