我在绘制从data.seattle.gov中提取的GeoJSON文件时遇到问题.具体来说,我正在使用可在此处找到的Shape文件.我将它转换为GeoJSON文件,我在下面提供了一个小样本.
通过使用D3,我希望得出西雅图应该是不同的区域(实际上我不完全确定它应该是什么,这就是为什么我画它...哈...)但由于某种原因尽管正确计算了路径,但它没有正确显示.
我在这里举办了我的例子.当我有时间设置它时,我会尝试用jsFiddle替换这个链接.问题是,GeoJSON文件非常大,所以我不认为jsFiddle是理想的.
我的代码很简单......我只是根据GeoJSON文件的功能添加路径.
var width = 1000,
height = 1000;
var svg = d3.select("body")
.append("svg")
.attr("width", width + "px")
.attr("height", height + "px");
var projection = d3.geo.mercator()
.scale(150)
.translate([width/2, height/2]);
var path = d3.geo.path()
.projection(projection);
var g = svg.append("g");
d3.json("geojson/data.geo.json", function(data) {
console.log(data);
g.selectAll("path")
.data(data.features)
.enter()
.append("path")
.attr("d", path)
.attr("stroke", "black")
.attr("stroke-width", "5px")
.attr("fill-opacity", 0);
});
Run Code Online (Sandbox Code Playgroud)
不幸的是,我觉得它只显示其中一条路径而不是所有路径.起初我以为可能是因为有某种填充而且它们只是隐藏在彼此之上,但我将其设置fill-opacity为0,这也没有帮助.
以下是GeoJSON文件的一小部分示例.
{
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"geometry": {
"type": "Polygon",
"coordinates": [
[ …Run Code Online (Sandbox Code Playgroud)