Javascript d3.js地图顽固地粘在页面左侧。如何居中？
我试图将Javascript d3.js地图顽固地粘在页面左侧。如何居中？,javascript,html,css,d3.js,Javascript,Html,Css,D3.js,我试图将align=“center”添加到地图所在的html元素中，但这完全无效 我在这里研究了stackoverflow，它建议将值附加到svg，但同样不起作用 下面是我正在使用的代码 我如何确保它将在页面上居中，而不是粘在左侧 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta content='width=device-width, initial-
align=“center”<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta content='width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0' name='viewport'>
<title>European Data Science Academy (EDSA) 2015</title>
<script src='javascripts/d3.js' type='text/javascript'></script>
<script src='javascripts/crossfilter.js' type='text/javascript'></script>
<script src='javascripts/dc.js' type='text/javascript'></script>
<script src='javascripts/bootstrap.min.js' type='text/javascript'></script>
<script src="http://d3js.org/topojson.v1.min.js"></script>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://cdn.leafletjs.com/leaflet-0.7.1/leaflet.js"></script>
<link href='stylesheets/bootstrap.min.css' rel='stylesheet' type='text/css'>
<link href="css/bootstrap.min.css" rel="stylesheet">
<style type="text/css">
<link href='stylesheets/dc.css' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="css/dc.css"/>
.background {
fill: none;
pointer-events: all;
display: block;
margin: auto;
}
.feature {
fill: #ccc;
cursor: pointer;
}
.feature.active {
fill: orange;
}
.mesh {
fill: none;
stroke: #fff;
stroke-linecap: round;
stroke-linejoin: round;
}
</style>
</head>
<body>
<!-- This is the Tittle of the First Container -->
<div class='navbar navbar-fixed-top'>
<div class='navbar-inner'>
<div class='container'>
<a class="brand">European Data Science Academy (EDSA)</a>
<img src="img/edsalogo2.png" alt="European Data Science Academy" width="142" height="142" align="right">
</div>
</div>
</div>
<!-- This is the main frame -->
<div class='container' id='main-container'>
<div class='content'>
<div class='container' style='font: 11px sans-serif;'>
<h3>Visualisation of Numbers of Data Science Jobs</h3>
<h4> Demo</h4>
<!-- This is the frame that contains the Map, Employer, Data Table-->
<div class='row-fluid'>
<div class='remaining-graphs span8'>
<!-- This is the frame that contains the Map-->
<div class='row-fluid'>
<div id="us-chart" align="center">
<!--<div class='bubble-graph span12' id='dc-bubble-graph'> -->
<h4>Distribution of Jobs by Country</h4>
<a class="reset" href="javascript:usChart.filterAll();dc.redrawAll();" style="display: none;">Reset</a>
<!--This is the reset class of the Map -->
<span class="reset" style="display: none;"> | Current filter: <span class="filter"></span></span>
<div class="clearfix"></div>
</div>
</div>
<!-- /other little graphs go here DataTable -->
<div class='row-fluid'>
<div class='span12 table-graph'>
<h4>Data Table for Filtered Countries</h4>
<table class='table table-hover dc-data-table' id='dc-table-graph'>
<thead>
<tr class='header'>
<th>Country</th>
<th>Location</th>
<th>Skills</th>
<th>Jobs</th>
<th>Employer</th>
<!-- <th>Link</th> -->
</tr>
</thead>
</table>
</div>
</div>
</div>
<!-- This is the frame that contains the Location-->
<div class='remaining-graphs span4'>
<div class='row-fluid'>
<div class='row-graph span8' id='dc-row-graph' style='color:black;'>
<h4>Search by Location</h4>
<!-- Reset filters selected in the pie-->
<a class="reset" href="javascript:pieChart2.filterAll();dc.redrawAll();" style="display: none;">Reset</a>
<!--This is the reset class -->
<span class="reset" style="display: none;"> | Current filter: <span class="filter"></span></span>
<div class="clearfix"></div>
</div>
<div class='row-graph span4' id='dc-row-graph2' style='color:black;'>
<h4>Search by Skills</h4>
<!-- Reset filters selected in the pie-->
<a class="reset" href="javascript:pieChart2.filterAll();dc.redrawAll();" style="display: none;">Reset</a>
<!--This is the reset class -->
<span class="reset" style="display: none;"> | Current filter: <span class="filter"></span></span>
<div class="clearfix"></div>
</div>
</div>
</div>
</div> <!-- Ediv class='row-fluid'-->
</div> <!-- END div class='container' style='font:-->
</div> <!-- END div class='content' -->
</div> <!--END div class='container' id='main-container' -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/topojson/1.6.19/topojson.min.js"></script>
<script type="text/javascript" src="js/d3.js"></script>
<script type="text/javascript" src="js/crossfilter.js"></script>
<script type="text/javascript" src="js/dc.js"></script>
<script src="http://d3js.org/topojson.v1.min.js"></script>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://cdn.leafletjs.com/leaflet-0.7.1/leaflet.js"></script>
<!-- THIS IS THE MOST IMPORTANT PART -->
<script type="text/javascript">
var width = 590,
height = 500,
active = d3.select(null);
var projection = d3.geo.mercator()
//.center([3.9, 43.0])
.precision(.1)
.scale((1200 + 1) / 2 )
.translate([660 / 4, 3360 / 4]);
var zoom = d3.behavior.zoom()
.translate([0, 0])
.scale(1)
.scaleExtent([1, 8])
.on("zoom", zoomed);
var path = d3.geo.path()
.projection(projection);
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height)
.on("click", stopped, true);
svg.append("rect")
.attr("class", "background")
.attr("width", width)
.attr("height", height)
.on("click", reset);
var g = svg.append("g");
svg
.call(zoom) // delete this line to disable free zooming
.call(zoom.event);
d3.json("eu.json", function(error, data) {
if (error) throw error;
g.selectAll("path")
.data(topojson.feature(data, data.objects.europe).features)
.enter().append("path")
.attr("d", path)
.attr("class", "feature")
.on("click", clicked);
g.append("path")
.datum(topojson.mesh(data, data.objects.europe, function(a, b) { return a !== b; }))
.attr("class", "mesh")
.attr("d", path);
});
function clicked(d) {
if (active.node() === this) return reset();
active.classed("active", false);
active = d3.select(this).classed("active", true);
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 / width, dy / height),
translate = [width / 2 - scale * x, height / 2 - scale * y];
svg.transition()
.duration(750)
.call(zoom.translate(translate).scale(scale).event);
}
function reset() {
active.classed("active", false);
active = d3.select(null);
svg.transition()
.duration(750)
.call(zoom.translate([0, 0]).scale(1).event);
}
function zoomed() {
g.style("stroke-width", 1.5 / d3.event.scale + "px");
g.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
}
// If the drag behavior prevents the default click,
// also stop propagation so we don’t click-to-zoom.
function stopped() {
if (d3.event.defaultPrevented) d3.event.stopPropagation();
}
</script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-33628816-1']);
_gaq.push(['_trackPageview']);
(function () {
var ga = document.createElement('script');
ga.type = 'text/javascript';
ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(ga, s);
})();
</script>
</body>
</html>
欧洲数据科学院（EDSA）2015
.背景{
填充：无；
指针事件：全部；
显示：块；
保证金：自动；
}
.特征{
填充：#ccc；
光标：指针；
}
.feature.active{
填充物：橙色；
}
.网格{
填充：无；
冲程：#fff；
笔划线头：圆形；
笔划线条连接：圆形；
}
|当前筛选器：
已筛选国家的数据表
国家
位置
技能
乔布斯
雇主
按位置搜索
|当前筛选器：
按技能搜索
|当前筛选器：
可变宽度=590，
高度=500，
活动=d3。选择（空）；
var projection=d3.geo.mercator（）
//.center（[3.9,43.0]）
.精度（.1）
.刻度（（1200+1）/2）
.翻译（[660/43360/4]）；
var zoom=d3.behavior.zoom（）
.translate（[0，0]）
.比额表（1）
.scaleExtent（[1,8]）
。打开（“缩放”，缩放）；
var path=d3.geo.path（）
.投影（投影）；
var svg=d3.选择（“正文”）.追加（“svg”）
.attr（“宽度”，宽度）
.attr（“高度”，高度）
。打开（“单击”，停止，为真）；
svg.append（“rect”）
.attr（“类别”、“背景”）
.attr（“宽度”，宽度）
.attr（“高度”，高度）
。打开（“单击”，重置）；
var g=svg.append（“g”）；
svg
.call（zoom）//删除此行以禁用自由缩放
.call（缩放事件）；
d3.json（“eu.json”），函数（错误，数据）{
如果（错误）抛出错误；
g、 选择全部（“路径”）
.data（topojson.feature（data，data.objects.europe）.features）
.enter（）.append（“路径”）
.attr（“d”，路径）
.attr（“类”、“特征”）
。开启（“点击”，点击）；
g、 附加（“路径”）
.datum（topojson.mesh（data，data.objects.europe，函数（a，b）{返回a！==b；}））
.attr（“类”、“网格”）
.attr（“d”，路径）；
});
单击函数（d）{
if（active.node（）==此）返回reset（）；
活动。分类（“活动”，假）；
active=d3.选择（this）.classed（“active”，true）；
变量边界=路径边界（d），
dx=边界[1][0]-边界[0][0]，
dy=边界[1][1]-边界[0][1]，
x=（界限[0][0]+界限[1][0]）/2，
y=（界限[0][1]+界限[1][1]）/2，
比例=.9/数学最大值（dx/宽度，dy/高度），
平移=[宽度/2-比例*x，高度/2-比例*y]；
svg.transition（）
.持续时间（750）
.call（缩放、平移、缩放、事件）；
}
函数重置（）{
活动。分类（“活动”，假）；
活动=d3。选择（空）；
svg.transition（）
.持续时间（750）
.call（缩放、平移（[0,0]）.scale（1.event）；
}
函数缩放（）{
g、 样式（“笔划宽度”，1.5/d3.event.scale+“px”）；
g、 attr（“转换”、“转换”（+d3.event.translate+））比例（+d3.event.scale+））；
}
//如果拖动行为阻止默认单击，
//同时停止传播，这样我们就不会点击缩放。
函数已停止（）{
if（d3.event.defaultPrevented）d3.event.stopPropagation（）；
}
var _gaq=_gaq | |[]；
_gaq.push（[''设置帐户'，'UA-33628816-1']）；
_gaq.push（[''u trackPageview']）；
（功能（）{
var ga=document.createElement（'script'）；
ga.type='text/javascript'；
ga.async=true；
ga.src=（'https:'==document.location.protocol？'https://ssl' : 'http://www“）+”.google analytics.com/ga.js'；
var s=document.getElementsByTagName（'script'）[0]；
s、 parentNode.insertBefore（ga，s）；
})();