D3.js学习笔记十七:中国地图之地图赋值

2015年03月18日 javascript 暂无评论 阅读 674 views 次

地图(d3.geo (Geography))——为地图指定值

为地图赋值的核心思想就是根据ID或者省份名称将对应的数据映射到一起。一种比较灵活的思路就是,不改变地图数据,将数据的对应关系放到地图的鼠标响应部分去。那么首先我们为地图的路径设置鼠标响应,接下来处理响应函数。为了方便,我们将上一节的地图打包成一个类,代码如下:

ChinaMap = function(parent) {
this.parent = parent;
this.mapPart = null;

//在方法中引用父类的指代变量
that = this;

//构造函数
function init() {
d3.json("json/china_simplify.json",
function(error, data) {
var projection = d3.geo.mercator().center([107, 31]).scale(350).translate([230, 260]);

//生成路径集
var path = d3.geo.path().projection(projection);

//生成区块集
that.mapPart = svg.selectAll("path").data(data.features).enter().append("g");

that.mapPart.append("path").attr("d", path).attr("fill", "#09F");

that.mapPart.append("title").text(function(d) {
return d.properties.name;
});

//初始化完毕,发送消息
fireEvent("loadComplete", {
"sender": that
});
});
}

//激活构造函数
init();

//事件队列
var listeners = {};

//如果有侦听,则触发事件
var fireEvent = function(eventName, eventProperties) {
if (!listeners[eventName]) return;
for (var i = 0; i < listeners[eventName].length; i++) {
listeners[eventName][i](eventProperties);
}
};

//注册侦听到类
this.addListener = function(eventName, callback) {
if (!listeners[eventName]) listeners[eventName] = [];
listeners[eventName].push(callback);
};

//从类里面移除侦听
this.removeListener = function(eventName, callback) {
if (!listeners[eventName]) return;
for (var i = 0; i < listeners[eventName].length; i++) {
if (listeners[eventName][i] == callback) {
delete listeners[eventName][i];
return;
}
}
};
}

因为需要异步加载地图数据才能完成初始化,因此添加了事件响应【loadComplete】,我们对地图的设置和操作都应该在地图加载完毕并初始化之后进行。有了这个类,我们只需响应地图类的【loadComplete】事件,就可以进行我们的地图操作。

<script type="text/javascript">
var svg=d3.select("body")
.append("svg")
.attr("width",600)
.attr("height",400);

var map=new ChinaMap(svg);
map.addListener("loadComplete",setMouseEvent);
function setMouseEvent()
{
map.mapPart.selectAll("path")
.on("click",function(d){
alert(d.properties.id);
d3.select(this)
.attr("fill","#F00");
})
.on("mouseover",function(d){
d3.select(this)
.attr("fill","#F00");
})
.on("mouseout",function(d){
d3.select(this)
.attr("fill","#09F");
});

}
</script>

因为需要异步加载地图数据才能完成初始化,因此添加了事件响应【loadComplete】,我们对地图的设置和操作都应该在地图加载完毕并初始化之后进行。有了这个类,我们只需响应地图类的【loadComplete】事件,就可以进行我们的地图操作。

17

demo17      示例代码地址

china_simplify (2)   json

 

给我留言

您必须 登录 才能发表留言!

Copyright © 大一网 保留所有权利.  

用户登录

分享到: