但是畫台灣地圖時，卻又可以正常顯示，這是怎麼回事？
台灣地圖的數據是從交通部的網站上下載的：
https://gist-map.motc.gov.tw/Complex/MapTopic
台南市地圖的數據是從台南市政府的網站上下載的：
http://data.tainan.gov.tw/dataset/tn-village
一開始搞不懂原因，最後交叉測試之後，發現是使用的基礎坐標不同所致，
台灣會用97二度分帶來標示地圖，與常見的經緯度是兩種不同的坐標系統，
也就是這種差異讓D3.js無法正確繪製出地圖。
台灣地圖比較好解決，因為交通部有提供TWD97與WGS84兩種坐標的資料，
所以只要下載WGS84經緯度的資料給D3.js，就可以繪製出台灣地圖。
但是台南市政府只提供TWD97的坐標資料，就必需經過轉換才能正確繪製。
我使用的是一套免費且開放原始碼的GIS系統QGIS，網址如下：
http://www.qgis.org/en/site/
下載並完成安裝後，開啟QGIS Desktop，畫面如下：
點選「圖層」->「加入圖層」->「加入向量圖層」
選擇要加入的圖層，也就是下載下來的台南市地圖資料（*.shp）
（因為中文字是以Big5編碼，所以要將編碼改為Big5）
開啟地圖後，在圖層面版內，選擇圖層並點選滑鼠左鍵，選擇「存檔為」
把CRS改為EPSG:4326-WGS 84，並將格式改為Geojson
存檔之後，就可以直接用D3.js來繪製台南市地圖了。
程式碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>台南市里地圖Geojson</title>
<!-- d3.js的引用要放在Header內 -->
<script src="d3/d3.min.js"></script>
<script src="topojson.js"></script>
</head>
<body>
<h1>台南市地圖Geojson</h1><br />
<svg width="800px" height="800px" id="svg1"></svg>
<script>
d3.json("map/ff.geojson", function(geojson) {
var path = d3.geo.path().projection(
//scale值越大地圖尺寸越大
d3.geo.mercator().center([120.8,23.07]).scale(35000)
);
//顏色
var color = d3.scale.linear().domain([100,200]).range(["#050","#f10"]);
//繪製地圖
d3.select("#svg1").selectAll("path")
.data(geojson.features)
.enter()
.append("path")
.attr({
d: path,
fill: function(d) {
return color(Math.random()*100);
}
});
});
</script>
</body>
</html>
