Javascript 将d3地图重新定位到屏幕中心，无论设备如何
我有： 但正如你所看到的，它都聚集在屏幕的左角——这是次光学——理想情况下，我希望它居中 我怎样才能做到这一点 我想这应该很容易，但每次我在谷歌上搜索“中心对齐d3地图”之类的东西时，我都会得到一些关于缩放的信息 :/ 也许我需要创建一个div什么的 代码是 下面也是——评论得很好Javascript 将d3地图重新定位到屏幕中心，无论设备如何,javascript,html,css,d3.js,Javascript,Html,Css,D3.js,我有： 但正如你所看到的，它都聚集在屏幕的左角——这是次光学——理想情况下，我希望它居中 我怎样才能做到这一点 我想这应该很容易，但每次我在谷歌上搜索“中心对齐d3地图”之类的东西时，我都会得到一些关于缩放的信息 :/ 也许我需要创建一个div什么的 代码是 下面也是——评论得很好 <!DOCTYPE html> <html lang='en'> <head> <meta charset='utf-8'> <style> .b
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='utf-8'>
<style>
.border {
stroke: #000;
fill: none;
}
.graticule {
fill: none;
stroke: #777;
stroke-width: .5px;
stroke-opacity: .5;
}
div.tooltip {
position: absolute;
text-align: center;
width: 84px;
height: 64px;
padding: 2px;
font: 12px sans-serif;
background: lightgrey;
border: 0px;
border-radius: 8px;
pointer-events: none;
}
</style>
</head>
<body>
<h1>Administrative Sub-Regions of Europe</h1>
<!-- this is the form at the bottom to change the NUTS -->
<form>
<select id="json_sources" name="json_sources" >
<option value ="nuts0" selected >Source 0</option>
<option value ="nuts1" >Source 1</option>
<option value ="nuts2" >Source 2</option>
<option value ="nuts3" >Source 3</option>
</select>
<form>
<!-- spinner -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/spin.js/2.0.1/spin.min.js'></script>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://d3js.org/topojson.v1.min.js"></script>
<script src="http://d3js.org/colorbrewer.v1.min.js"></script>
<script src="https://cdn.rawgit.com/rveciana/d3-composite-projections/v0.2.0/composite-projections.min.js"></script>
<!-- why do we need this? -->
<section id='chart'>
</section>
<script>
var div = d3.select("body").append("div")
.attr("class", "tooltip")
.style("opacity", 0);
var width = 600,
height = 500;
var projection = d3.geo.conicConformalEurope();
var graticule = d3.geo.graticule();
var path = d3.geo.path()
.projection(projection);
// Find new colours here: http://colorbrewer2.org/
var scale = d3.scale
.quantize()
.domain([10,60])
.range(colorbrewer.PuRd[3]);
var svg = d3.select("body")
.append("svg")
.attr("width", width, "100%")
.attr("height", height, "100%")
.call(
d3.
behavior.
zoom().
on("zoom", function () {
svg.attr("transform", "translate(" +
d3.event.translate +
")" + " scale(" +
d3.event.scale +
")")
}
)
)
.on("dblclick.zoom", null)
.append("g")
//what the hell does this do?
svg.append("path")
.datum(graticule)
.attr("class", "graticule")
.attr("d", path);
// pretty self spoken
var dropdown = d3.select("#json_sources")
// config references SPINNER RELATED
var chartConfig = {
target : 'chart',
data_url : './nuts0.json',
width: 600,
height: 500,
val: 90
};
// loader settings SPINNER RELATED
var opts = {
lines: 9, // The number of lines to draw
length: 9, // The length of each line
width: 5, // The line thickness
radius: 14, // The radius of the inner circle
color: '#EE3124', // #rgb or #rrggbb or array of colors
speed: 1.9, // Rounds per second
trail: 40, // Afterglow percentage
className: 'spinner', // The CSS class to assign to the spinner
};
// SPINNER RELATED
var target = document.getElementById(chartConfig.target);
// KICK OFF callback function wrapped for loader in 'init' function
function init() {
// trigger loader initial spinner
var spinner = new Spinner(opts).spin(target);
// load json data and trigger callback
d3.json(chartConfig.data_url, function(data) {
// stop spin.js loader
spinner.stop();
// instantiate chart within callback
chart(data);
});
}
//call that init function we define above
init();
//here where all the real stuff happens
//in fact all that init stuff is just legacy
//from the spinner example
function chart(data) {
//start of map making function
var change = function() {
// trigger loader of the spinner
var spinner = new Spinner(opts).spin(target);
// did they change the NUTS?
var source = dropdown.node().options[dropdown.node().selectedIndex].value;
//necessary data processing
var str1 = source;
var str2 = ".json";
var file = str1.concat(str2);
console.log(file);
d3.json(file, function(error, europe) {
d3.csv("povertry_rate.csv", function(error, povrate) {
//change the map to apadpt to the nuts file
if (source == "nuts1") {
var land = topojson.feature(europe, europe.objects.nuts1);
} else if (source == "nuts2") {
var land = topojson.feature(europe, europe.objects.nuts2);
} else if (source == "nuts3") {
var land = topojson.feature(europe, europe.objects.nuts3);
} else if (source == "nuts0") {
var land = topojson.feature(europe, europe.objects.nuts0);
}
data = {};
povrate.forEach(function(d) {
data[d.GEO] = d['2013'];
});
//clear way for the regeneration
d3.selectAll("path").remove();
//recreate those map lines
svg.append("path")
.datum(graticule)
.attr("class", "graticule")
.attr("d", path);
// stop spin.js loader
spinner.stop();
console.info(data);
svg
.selectAll("path")
.data(land.features)
.enter()
.append("path")
.attr("d", path)
.style("stroke","#000")
.style("stroke-width",".5px")
.style("fill",function(d){
var value = data[d.id];
if (isNaN(value)){
value = data[d.id.substring(0,2)];
}
if (isNaN(value)){
return "#fff";
}
return scale(value);
})
.on("mouseover", function(d,i) {
var value = data[d.id];
if (isNaN(value)){
value = data[d.id.substring(0,2)];
}
div.transition()
.duration(200)
.style("opacity", 0.9);
div.html("<b>"+d.properties.name+"</b><br/>" + value + "%")
.style("left", (d3.event.pageX) + "px")
.style("top", (d3.event.pageY - 28) + "px");
})
.on("mouseout", function(d,i) {
div.transition()
.duration(500)
.style("opacity", 0);
});
svg
.append("path")
.style("fill","none")
.style("stroke","#000")
.attr("d", projection.getCompositionBorders());
});
})
}
dropdown.on("change", change)
change(); //call that change function once
}
</script>
</body>
</html>
.边界{
行程：#000；
填充：无；
}
.分划{
填充：无；
行程：777；
笔划宽度：.5px；
笔画不透明度：.5；
}
分区工具提示{
位置：绝对位置；
文本对齐：居中；
宽度：84px；
高度：64px；
填充：2px；
字体：12px无衬线；
背景：浅灰色；
边界：0px；
边界半径：8px；
指针事件：无；
}
欧洲行政分区
来源0
资料来源1
资料来源2
资料来源3
var div=d3.选择（“主体”）.追加（“div”）
.attr（“类”、“工具提示”）
.样式（“不透明度”，0）；
可变宽度=600，
高度=500；
var projection=d3.geo.conicformaleurope（）；
var graticule=d3.geo.graticule（）；
var path=d3.geo.path（）
.投影（投影）；
//在此处查找新颜色：http://colorbrewer2.org/
var标度=d3.0标度
.quantize（）
.域（[10,60]）
.范围（colorbrewer.PuRd[3]）；
var svg=d3.选择（“主体”）
.append（“svg”）
.attr（“宽度”，宽度，“100%”）
.attr（“高度”，高度，“100%”）
.打电话(
d3。
行为。
缩放（）。
打开（“缩放”，函数（）{
attr（“transform”、“translate（”+
d3.event.translate+
“”“+”比例（“”）+
d3.事件量表+
")")
}
)
)
.on（“dblclick.zoom”，null）
.附加（“g”）
//这到底是干什么的？
追加（“路径”）
.基准面（分划）
.attr（“类别”、“分划”）
.attr（“d”，路径）；
//自言自语
var dropdown=d3.选择（“#json_sources”）
//与微调器相关的配置引用
var chartConfig={
目标：“图表”，
数据url:'./nuts0.json'，
宽度：600，
身高：500，
瓦尔：90
};
//加载器设置与微调器相关
变量选项={
lines:9，//要绘制的行数
长度：9，//每行的长度
宽度：5，//线条粗细
半径：14，//内圈的半径
颜色：“#EE3124”、//#rgb或#rrggbb或颜色数组
速度：1.9，每秒//圈
轨迹：40，//余辉百分比
className:'微调器'，//要分配给微调器的CSS类
};
//纺纱机相关
var target=document.getElementById（chartConfig.target）；
//启动“init”函数中为装入器包装的回调函数
函数init（）{
//触发加载器初始旋转器
var微调器=新微调器（opts）。微调（目标）；
//加载json数据并触发回调
d3.json（chartConfig.data_url，函数（数据）{
//停止spin.js加载程序
spinner.stop（）；
//在回调中实例化图表
图表（数据）；
});
}
//调用上面定义的init函数
init（）；
//这里发生了所有真实的事情
//事实上，所有init的东西都是遗留的
//来自微调器示例
功能图（数据）{
//开始地图制作功能
var change=function（）{
//旋转器的触发器加载程序
var微调器=新微调器（opts）。微调（目标）；
//他们换坚果了吗？
var source=dropdown.node（）.options[dropdown.node（）.selectedIndex].value；
//必要的数据处理
var str1=来源；
var str2=“.json”；
var file=str1.concat（str2）；
console.log（文件）；
json（文件，函数（错误，欧洲）{
d3.csv（“povertry_rate.csv”），函数（错误，povrate）{
//将映射为apadpt更改为nuts文件
如果（源==“螺母1”）{
var land=topojson.feature（europe，europe.objects.nuts1）；
}否则，如果（源==“nuts2”）{
var land=topojson.feature（europe，europe.objects.nuts2）；
}否则，如果（源==“螺母3”）{
var land=topojson.feature（europe，europe.objects.nuts3）；
}否则，如果（源==“nuts0”）{
var land=topojson.feature（europe，europe.objects.nuts0）；
}
数据={}；
povrate.forEach（功能（d）{
数据[d.GEO]=d['2013']；
});
//为再生扫清道路
d3.选择全部（“路径”）.remove（）；
//重新创建那些地图线
追加（“路径”）
.基准面（分划）
.attr（“类别”、“分划”）
.attr（“d”，路径）；
//停止spin.js加载程序
spinner.stop（）；
控制台信息（数据）；
svg
.selectAll（“路径”）
.数据（土地、地貌）
.输入（）
.append（“路径”）
.attr（“d”，路径）
.style（“笔划”，“#000”）
.style（“笔划宽度”，“0.5px”）
.样式（“填充”，功能（d）{
var值=数据[d.id]；
如果（isNaN（值））{
值=数据[d.id.子字符串（0,2）]；
}
如果（isNaN（值））{
返回“#fff”；
}
返回量表（值）；
})
.on（“鼠标悬停”，功能（d，i）{
var值=数据[d.id]；
如果（isNaN（值））{
值=数据[d.id.子字符串（0,2）]；
}
过渡部（）
svg {
display: block;
margin: auto;
border: 1px solid gray;
}