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

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;
}
}
};
}

<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>