这篇文章是《数据可视化实战》中的作者例子,我只不过是想重温下地理路径生成器的使用思路。
地理路径的格式有两种,geojson,topojson,topojson是d3作者mike自创的一种格式,并没有成为一种标准,这个例子是书中例子,格式是geojson形式的。
1.数据格式
数组中每个字典都代表了一个州的边界数据,
2.我们先看下代码
<script type="text/javascript">
var w = 500;
var h = 300;
//地理数据的格式是三维的,我们为了在二维平面上显示,所以需要有一个转换方式,将三维映射到二维screen上,这就是投影方式
//定义投影方式
var projection = d3.geo.albersUsa()
.translate([w/2, h/2])
.scale([500]);
//定义 geo generator,将投影方式作为路径生成器对象的属性
var path = d3.geo.path()
.projection(projection);
//svg画布
var svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
//load data
d3.json("us-states.json", function(json) {
//bind the data
svg.selectAll(