您好我一直在关注如何使用D3和Geo Json文件创建地理地图的示例。
到目前为止,我使用本书创建了以下没有问题: ħ**号码://chimera.labs.oreilly.com/books/1230000000345/ch12.html#_projections
</head>
<body>
<script type="text/javascript">
//Width and height
var w = 500;
var h = 300;
//Define map projection
var projection = d3.geo.albersUsa()
.translate([w/2, h/2])
.scale([500]);
//Define path generator
var path = d3.geo.path()
.projection(projection);
//Create SVG element
var svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
//Load in GeoJSON data
d3.json("us-states.json", function(json) {
//Bind data and create one path per GeoJSON feature
svg.selectAll("path")
.data(json.features)
.enter()
.append("path")
.attr("d", path);
});
</script>
</body>
使用这个json文件: https://dl.dropboxusercontent.com/u/49159198/us-states.json
当我尝试使用以下json文件创建世界地图时(格式与美国只有国家而不是国家一样),它不会出现。
https://dl.dropboxusercontent.com/u/49159198/countries.geo.json
美国地图以黑色的方式出现。在CSS中的路径中应用了一些笔划后,我可以看到地图在那里,但这不起作用,因为我需要稍后通过CSV中的数据编辑路径。
世界地图代码:
</head>
<body>
<script type="text/javascript">
//Width and height
var w = 960;
var h = 480;
var projection = d3.geo.equirectangular()
.translate([w/2, h/2])
.scale([150]);
var path = d3.geo.path()
.projection(projection);
//Create SVG element
var svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
//Load in GeoJSON data
d3.json("countries.geo.json", function(json) {
//Bind data and create one path per GeoJSON feature
svg.selectAll("path")
.data(json.features)
.enter()
.append("path")
.attr("d", path);
});
</script>
</body>
任何帮助都会很棒,因为它会帮助我的大学项目。
由于以下答案而更新
答案 0 :(得分:2)
不要将albersUsa
投影用于除美国之外的任何内容 - 它会剪切该区域之外的所有内容。相反,使用例如albers
。