先說下最近學習的一些經驗，
1越來越覺得我們在學習每個東西的時候應該打破砂鍋問到底，爲什麼要這樣做？這樣做有什麼用？在網頁上呈現的是什麼？將每句代碼的作用都搞清楚，這樣才能在組合的時候我們能用的很放心。
2.還要一個就是數據格式的問題，在學習別人代碼的時候要搞清楚別人加載的文件數據格式是什麼，其實在加載完數據後，作者操作的本質就是不斷提取加載的數據，組合成自己所需要的數據格式，在地圖中這一點尤爲重要，比如說path，我們需要geo形式的數據，但是我們只要topojson格式，所以就需要轉換一下了。
3.在學習時理解第一，記憶第二，對代碼的每句作用進行肢解，試着總體上還原整篇代碼的寫作策略，然後自己寫，不要對着別人的敲，自己試着把思路過一遍敲出來，不會的跳過去，一遍完整下來再去調試修改。
<style type="text/css">
circle {
fill:red;
}
path.province{
/*stroke: pink;*/
}
</style>
<body>
</body>
<script type="text/javascript">
var width=1000,height=1000;
var svg=d3.select("body")
.append("svg")
.attr("width",width)
.attr("height",height)
//geo是三維的，需要轉換爲二維的，所以需要定義投影方式
var projection=d3.geo.mercator()
.center([107,31])
.scale(800)
.translate([width/2,height/2])
var path=d3.geo.path().projection(projection)
d3.json("china.topojson",function(error,toporoot){
//將topojson轉換爲geojson 需要額外mike提供的js文件
var georoot = topojson.feature(toporoot,toporoot.objects.china);
var china=svg.append("g")
var province=svg.selectAll("path .province")
.data(georoot.features)
.enter()
.append("path")
.attr("class","province")
.style("fill","steelblue")
.attr("d",path)
d3.json("places.json",function(error,root){
//將g元素移動到點所在的位置
var points=svg.selectAll("g .circle")
.data(root.location)
.enter()
.append("g")
.attr("class","circle")
.attr("transform",function(d,i){
var d=projection([d.log,d.lat])
return "translate("+d[0]+","+d[1]+")";
})
points.append("circle")
.attr("r",7)
points.append("image")
.attr("x",-20)
.attr("y",20)
.attr("width",60)
.attr("height",60)
.attr("xlink:href",function(d){
return d.img;
})
})
})
</script>這篇代碼總體思路：
1.先畫出china
1)因爲geo三維，所以定義projection轉換二維
2）綁定geo.path生成地圖
2.circle
1)將g元素移動到特定位置
2)g元素中添加circle
3)g元素中添加image標籤
下邊是point的數據格式
下圖是轉換後georoot的數據，我們可以看到features中包含了34個省的數據
最後效果
