我正试图用d3.js制作一个等值线,但我刚开始时就被卡住了.我发现了一个Shape文件,并从它产生的以GeoJSON和TopoJson文件,就像在这里.该地图使用Albers-Siberia投影.我发现这个预测:
预测:Albers Equal-Area Conic
PROJ.4:+ proj = aea + lat_1 = 52 + lat_2 = 64 + lat_0 = 0 + lon_0 = 105 + x_0 = 18500000 + y_0 = 0 + ellps = krass + units = m + towgs84 = 28,-130,-95 ,0,0,0,0 + no_defs
MapInfo:"Albers-Siberia",9,1001,1,710,0,64,52,18500000,0.
所以我最终得到了这个代码,它什么也没做(甚至freez up),出了什么问题？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Choropleth</title>
<script type="text/javascript" src="d3/d3.v3.js"></script>
<script type="text/javascript" src="d3/queue.v1.min.js"></script>
<script type="text/javascript" src="d3/topojson.v0.min.js"></script>
</head>
<body>
<h1>My …我有TopoJSON文件,它看起来像这样:
{"type":"Topology","transform":{"scale":[0.03600360003702599,0.0040674580654071245],"translate":[-179.9999967702229,41.18684289776669],"objects":{"country":{"type":"GeometryCollection","geometries":[{"type":"Polygon","arcs":[[0]],"properties":{"AREA":29809500,"PERIMETER":21822.4,"region":"XYZ"}},…
我想在我的d3.js代码中使用属性值("AREA","PERIMETER","region").我试图获得一些值,但它不起作用:
d3.json("map_topo.json", function(error, map) {
svg.append("path")
.datum(topojson.object(map, map.objects.country).geometries)
.attr("d", path)
.style("fill", function(d) {
if (d.properties.region == "XYZ")
{return "red"}
else {return "gray"}
})
我做错了什么？
UPD:问题是在@ChrisWilson的帮助下解决的,问题在于追加一条路径,而不是选择所有路径.工作代码(对于topojson.v0.js):
d3.json("map_topo.json", function(error, map) {
svg.selectAll("path")
.data(topojson.object(map, map.objects.country).geometries)
.enter().append("path")
.attr("d", path)
.style("fill", function(d) {
if (d.properties.region == "XYZ")
{return "red"}
else {return "gray"}
});
对于topojson.v1.js使用topojson.feature方法(请看下面的评论).