D3.js使用XML的範例

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>


利用Plink替代Putty來建立Script