translate 位置設定
scale 1回到比例1大小

程式小試身手 發表在 痞客邦 留言(0) 人氣()


前言:
在本機撰寫D3js時,讀取json會找不到檔案就沒有顯示效果,這讓我對於D3js開發方式有了翻轉的概念!

程式小試身手 發表在 痞客邦 留言(0) 人氣()


<!doctype html>
<svg width="800px" height="600px" viewBox="0 0 800 600"></svg>
  <script type="text/javascript" src="http://d3js.org/topojson.v1.min.js"></script>
   <script src ="http://d3js.org/d3.v3.min.js"></script>
    <script type="text/javascript" src="county.js"></script>
  <script>
      var features = topojson.feature(topodata, topodata.objects["county"]).features;
      // 這裡要注意的是 topodata.objects["county"] 中的 "county" 為原本 shp 的檔名
  
    var path = d3.geo.path().projection( // 路徑產生器
    d3.geo.mercator().center([121,24]).scale(6000) // 座標變換函式
  );
 
  d3.select("svg").selectAll("path").data(features)
    .enter().append("path").attr("d",path);
    for(item=features.length - 1; item =0; item -- ) { 
    item.properties.density = data[item.properties.C_Name]; 
  }
 
  var color = d3.scale.linear().domain([0,10000]).range(["#090","#f00"]);
  
  d3.select("svg").selectAll("path").data(features).attr({
    d: path,
    fill: function(d) {
      return color(Math.random()*100);
    }
  });
  </script>

程式小試身手 發表在 痞客邦 留言(1) 人氣()

最近研究D3.js發現了不錯的D3JS教學影片
D3.js tutorial - 7 - Enter, Update, Exit

程式小試身手 發表在 痞客邦 留言(0) 人氣()


前言:
對於讀資料,google chrom 一直出現錯誤,網路上範例明明就是直接寫" d3.json("project2_level.json",function(data){ "

程式小試身手 發表在 痞客邦 留言(0) 人氣()


前言:
根據影片教學第一步要先會畫線條,其中我在這遇到了問題就是沒有代碼,

程式小試身手 發表在 痞客邦 留言(0) 人氣()

前言:
我完全是新手,甚至不熟悉javascript、html,因此身為新手的我,將要把學習的路程記錄在此。一開始我一直思考要用什麼編譯器(eclipse?Visual Studio?)最後執行我一貫的實作派,先看得見成果再說!於是我直接新增文件副檔名用.html跑瀏覽器。

程式小試身手 發表在 痞客邦 留言(0) 人氣()

1
Blog Stats
⚠️

成人內容提醒

本部落格內容僅限年滿十八歲者瀏覽。
若您未滿十八歲,請立即離開。

已滿十八歲者,亦請勿將內容提供給未成年人士。