D3.JS V4 绘制中国地图
代码：
<!DOCTYPE html>
<meta charset="utf-8">
<style>
.states :hover {
fill: red;
stroke-width: 2px;
}
.state-borders {
fill: none;
stroke: #fff;
stroke-width: 0.5px;
stroke-linejoin: round;
stroke-linecap: round;
pointer-events: none;
}
</style>
<svg width="1200" height="800" style="border:1px gainsboro solid"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://d3js.org/topojson.v2.min.js"></script>
<script src="jquery-1.12.1.min.js"></script>
<script>
var svg = d3.select("svg"),
width = svg.attr("width"),
height = svg.attr("height");
var projection = d3.geoMercator()
.center([107, 31])
.scale(950)
.translate([width/2, height/2+height/6])
var path = d3.geoPath()
.projection(projection);
d3.json("china.json", function(error, us) {
if (error) throw error;
svg.append("g")
.attr("class", "states")
.selectAll("path")
// .data(topojson.feature(us, us.objects.states).features)
.data(us.features)
.enter().append("path")
.attr('stroke','white')
.attr('fill','lightgray')
.attr("d", path)
.append('title')
.text(function(d){
a=d
return d.properties.name
});
svg.append("path")
.attr("class", "state-borders")
.attr("d", path(topojson.mesh(us, us, function(a, b) { return a !== b; })));
a={"value":[{"BusStopCode":"01012","RoadName":"Victoria St","Description":"Hotel Grand Pacific","Latitude":29.160752671000068,"Longitude":113.56942793100006 }]}
svg.selectAll("circle")
.data(a.value).enter().append("circle")
.attr('stroke','red')
.attr('fill','green')
.attr("d", path)
.attr("r", 2)
.attr("transform", function(d) {
return "translate(" + projection([
d.Longitude,
d.Latitude
]) + ")";
})
.append('title')
.text(function(d){
a=d
return d.BusStopCode
});
});
</script>
从http://blog.csdn.net/lzhlzz/article/details/41347929 中下载的地理信息的中国JSON文件绘制得到的图如下：
与正常的中国地图相比，可以发现西藏那一块缺了存在争议的某一部分，关于这个，我们，当然是要加上去的。。。
新的china.json数据连接在这
https://files.cnblogs.com/files/combfish/china.zip，得到的图如下：
https://files.cnblogs.com/files/combfish/china.zip，得到的图如下：
