Siy*_*iya 2 javascript html5 svg dom d3.js
我正在为我打算为其工作的一家公司完成一个项目，并且在编写肯尼亚的choropleth地图时遇到了代码挑战。我已经能够使用GeoJSON和TopoJSON生成地图，并从文件夹中的JSON文件绘制路径。目前，这是我的HTML外观：
<!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。我没有在控制台中看到任何错误，因此我认为在单独的JavaScript文件中写入D3代码时，我缺少一些东西。有人可以在这方面帮助我吗？非常感激。
PS：请原谅我的代码混乱不堪，我正在重构它。我从在书本和在线中找到的两种不同食谱中提取了它。
小智 5
这个答案似乎很晚，但是我遇到了同样的问题，并且牢牢记住了要解决的问题，将包含已传输代码的脚本放在body标签结尾之前的页面底部。将链接到d3库的脚本放在您的书面脚本上方总是一个好主意。原因是，如果您将脚本放在html页面的head标签中，则其搜索的元素尚不存在。除非另有说明，否则涉及DOM的一切都是同步的。
| 归档时间： |
|
| 查看次数： |
3582 次 |
| 最近记录： |