2
我正在为我计划工作的公司开展一个项目，并且我有一个代码挑战来创建肯尼亚的等值线地图。我已经能够使用GeoJSON和TopoJSON从一个文件夹中的JSON文件中绘制路径来生成地图。目前，这是我的HTML的外观：D3js外部JavaScript文件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="js/d3.v3.js"></script>
<script type="text/javascript" src="js/topojson.js"></script>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
<link rel="stylesheet" href="css/bootstrap.css" media="screen">
</head>
<body>
<div class="row">
<header class="span12">
<h1>Aphellion Activity 1 - Kenya Maps</h1>
<h3>The goal of this activity is generate two maps one drawn with D3.js using GeoJSON to generates the paths, the other drawn using TopoJSON to generate the paths.</h3>
</header>
</div>
</br>
<div class="row">
<div class="span4" id="Map1"></div>
<div class="span2" id="paragraph">
</div>
<div class="span4" id="Map2"></div>
<div class="span2">
<p>Mauris ornare mollis odio, non molestie arcu ullamcorper sit amet. Vivamus ultrices, est id ullamcorper blandit, risus ligula fringilla nibh, in convallis orci urna et sapien. Phasellus malesuada accumsan velit ut tristique. Duis vehicula pellentesque gravida. Curabitur at mollis turpis, in convallis risus. Sed faucibus non dui quis vehicula. Fusce mollis ullamcorper adipiscing. Vestibulum hendrerit luctus erat ac iaculis.</p>
</div>
</div>
</body>
<script type="text/javascript">
d3.select("div#paragraph").text("Mauris ornare mollis odio, non molestie arcu ullamcorper sit amet. Vivamus ultrices, est id ullamcorper blandit, risus ligula fringilla nibh, in convallis orci urna et sapien. Phasellus malesuada accumsan velit ut tristique. Duis vehicula pellentesque gravida. Curabitur at mollis turpis, in convallis risus. Sed faucibus non dui quis vehicula. Fusce mollis ullamcorper adipiscing. Vestibulum hendrerit luctus erat ac iaculis");
var width = 300;
var height = 400;
//TopoJSON Map
//new projection
var projection = d3.geo.mercator()
.center([36.8000, 1.2667])
.scale([1000])
.translate([width/2, height/2]);
var path = d3.geo.path().projection(projection);
var svg = d3.select("div#Map1")
.append("svg")
.attr("width", width)
.attr("height", height)
.style("fill", "steelblue");
var g = svg.append("g")
.call(d3.behavior.zoom()
.scaleExtent([1, 10])
.on("zoom", zoom));
d3.json("js/kenya-topo.json", function(error, topology) {
g.selectAll("path")
.data(topojson.feature(topology, topology.objects.Kenya).features)
.enter()
.append("path")
.attr("d", path);
});
svg.append("rect").attr("width", width).attr("height", height).style("stroke", "black").style("fill", "none");
function zoom() {
g.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
};
//GeoJSON Map
var svg = d3.select("div#Map2")
.append("svg")
.attr("width", width)
.attr("height", height);
//Load in GeoJSON data
d3.json("js/kenya.geojson", function(json) {
//Create first guess for the projections
var center = d3.geo.centroid(json)
var scale = 2000;
var offset = [width/2, height/2];
var projection = d3.geo.mercator()
.scale(scale)
.center(center)
.translate(offset);
//Define default path generator
var path = d3.geo.path()
.projection(projection);
//using the path determine the bounds of the current map and use
//these to determine better values for the scale and translation
var bounds = path.bounds(json);
var hscale = scale*width/(bounds[1][0] - bounds[0][0]);
var vscale = (hscale < vscale) ? hscale : vscale;
var offset = [width - (bounds[0][0] + bounds[1][0])/2, height - (bounds[0][1] + bounds[1][1]/2)];
//new projection
projection = d3.geo.mercator().center(center)
.scale(scale).translate(offset);
path = path.projection(projection);
//add a rectangle to see the bound of the svg
svg.append("rect").attr("width", width).attr("height", height).style("stroke", "black").style("fill", "none");
//Bind data and create one path per GeoJSON feature
svg.selectAll("path")
.data(json.features)
.enter()
.append("path")
.attr("d", path)
.style("fill", "steelblue");
});
</script>
</html>
正如你可以看到我的JavaScript是下面的，但我想要做的是有它在两个单独的文件，我会在查询中。当我这样做时，数据不会绑定到DOM，也不会生成SVG。我没有在控制台中看到任何错误，所以我认为在我的D3代码写入单独的JavaScript文件时有些缺失。任何人都可以在这方面帮助我吗？非常感激。
P.S.请原谅我的代码的混乱，我在讲话时正在重构它。我从书籍和在线上发现的两种不同食谱中选取它。
您可能会在标题中包含Javascript文件。在定义操作元素之后，您需要将其包含在主体中。 –
谢谢拉尔斯。我会去做。 – Siya