001.xml的部份程式碼,資料來源:台南市opendata
---------------------------------------------------
<getOdataJHController.Statistic_CitySexStdCountsJHDTO>
<num>221</num>
<school>下營國中</school>
<sex>男</sex>
</getOdataJHController.Statistic_CitySexStdCountsJHDTO>
<getOdataJHController.Statistic_CitySexStdCountsJHDTO>
<num>218</num>
<school>下營國中</school>
<sex>女</sex>
</getOdataJHController.Statistic_CitySexStdCountsJHDTO>
<getOdataJHController.Statistic_CitySexStdCountsJHDTO>
<num>241</num>
<school>土城高中</school>
<sex>男</sex>
</getOdataJHController.Statistic_CitySexStdCountsJHDTO>
<getOdataJHController.Statistic_CitySexStdCountsJHDTO>
<num>197</num>
<school>土城高中</school>
<sex>女</sex>
</getOdataJHController.Statistic_CitySexStdCountsJHDTO>
TEST_D3.html的程式碼
-----------------------------------------------------------------
<!DOCTYPE html>
<html>
<head>
<title>D3.js測試</title>
<meta charset="utf-8" />
<title>Test10_D3.js</title>
<!-- d3.js的引用要放在Header內 -->
<script src="d3/d3.min.js"></script>
</head>
<body>
<h1>D3.js程式測試</h1><br />
<div width="500" id="div1"></div>
<!-- D3.js的Scropt語法要放在Body內 -->
<script>
d3.xml("001.xml","application/xml", function(xml) {
d3.select("#div1").selectAll("p")
//這裡有一個要注意的就是要指定[0]才能正確取得物件陣列
.data(d3.select(xml).selectAll("school")[0])
.enter()
.append("p")
//使用textContent取得物件的值(文字的部份)
.text(function(d) {return d.textContent;});
});
</script>
</body>
</html>