D3入門

D3.js

適用情況
- 1. 選擇 D3：如果希望開發腦海中任意想象到的圖表。
  2. 選擇 Highcharts、Echarts 等：如果希望開發幾種固定種類的、十分大衆化的圖表。
一.引入方式
- (1)下載安裝包D3.zip
- (2)引用網址（有網的情況下使用）
```
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
```
二.操作方式
- 鏈式操作（與jQuery類似）
三.概念
- 選擇集
  - 使用 d3.select() 或 d3.selectAll() 選擇元素後返回的對象，就是選擇集

四.D3的操作

1.文字輸出

<body>
<p>Hello World 1</p>
<p>Hello World 2</p>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script>
d3.select('body').selectAll('p').text('www.decembercafe.org');
//選擇<body>中所有的<p>，其文本內容爲 practise，選擇集保存在變量 p 中
var p=d3.select('body')
        .selectAll('p')
        .text('practise');
//修改段落顏色和字體大小
p.style("color","red")
        .style("font-size","72px")
</script>
</body>

2.元素操作

（1）選擇元素

d3.select（）；選擇所有指定元素的第一個
d3.selectAll（）；選擇指定元素的全部

var body = d3.select("body"); //選擇文檔中的body元素
var p1 = body.select("p");      //選擇body中的第一個p元素
var p = body.selectAll("p");    //選擇body中的所有p元素
var svg = body.select("svg");   //選擇body中的svg元素
var rects = svg.selectAll("rect");  //選擇svg中所有的svg元素

（2）綁定元素

datum（）；綁定到一個數據選擇集上
data（）; 綁定到選擇集上，數組的個響指分別於選擇集的各元素綁定–》常用

        <!--利用datum（）綁定數據-->
<script>
var str='China';
var body=d3.select("body");
var p=body.selectAll('p');
p.datum(str);
//無名函數  選擇集需要使用綁定數據時經常使用
/*無名函數 function（d,i）包含兩個參數  -參數一：代表數據，也就是與某元素綁定的數據
                                         參數二：代表索引，代表數據的索引號，從0開始
*                  */
p.text(function (d, i) {
    return "第" +i+
            "個綁定的數據是"+d
})
/*輸出結果：
 第0個綁定的數據是China

 第1個綁定的數據是China

 第2個綁定的數據是China*/
</script>
<!--利用data（）綁定數據-->
<script>
var dataset=["I like apple","I like banana","I like orange"]
var body=d3.select('body');
var p=body.selectAll('p');
p.data(dataset)
        .text(function(d,i){
            return d;
        });
// 這裏也使用了無名函數 當i=0 時，d 爲I like apple
/*輸出結果：
 I like apple
 I like banana
 I like orange
* */
</script>

（3）選擇、插入、刪除元素

選擇元素 ID、類

         <!--選擇第二個元素  選擇指定元素用ID-->
<script>
var p2=d3.selectAll('body').select('#myid');
p2.style("color","green")
</script>
<!--類 選擇多個元素  用類-->
<script>
var p = d3.selectAll('body').selectAll(".myclass");
p.style("color","yellow");
</script>

插入元素
- append（）在選擇集末尾插入元素
- insert（）在選擇集前面插入元素

刪除元素

remove（）刪除元素

    var p = body.select("#myid");
    p.remove();

五.D3的使用

1.比例尺（Scale）

（1）定義：將某一區域的值映射到另一區域，其大小關係不變
（2）作用：解決數值過大或者過小無法繪製的侷限性
（3）參數
- 定義域：domain
- 值域：range

（4）分類

a.線性比例尺

定義：能將一個連續的區間，映射到另一區間。–》可以用來解決柱形圖寬度的問題

 假設有一下數組：
 var dataset=[1.2,2.3,0.9,1.5,3.3],現有如下要求，將dataset中的最小值映射成0，最大值，映射成300；
 代碼如下
 var  min=d3.min(dataset);
 var max=d3.max(dataset);
 var linear=d3.scale.linear()
                  .domain([min,max])
                  .range(0,[300])
                  linear(0.9)
        linear(0.9);    //返回 0
        linear(2.3);    //返回 175
        linear(3.3);    //返回 300
//d3.scale.linear()返回值可以當做函數來使用，所以纔有linear（0.9）的用法

b.序數比例尺

針對離散型數據來使用

 var index = [0, 1, 2, 3, 4];
var color = ["red", "blue", "green", "yellow", "black"];
var ordinal=d3.scale.ordinal()
.domain(index)
.range(color);
ordinal(0);
ordinal(1);
ordinal(4)
console.log([ordinal(0),ordinal(1),ordinal(4)]);

2.座標軸（axis）
- d3.svg.axis():D3中的座標軸組件，能夠在SVG中生成座標軸的元素
- scale（）：指定比例尺
- orient（bottom）：指定刻度的朝向，bottom表示在座標軸下方顯示
- ticks（）：指定刻度的數量

六。動態操作

transition

.attr("fill","red")         //初始顏色爲紅色
.transition()               //啓動過渡
.attr("fill","steelblue")   //終止顏色爲鐵藍色

duration

     指定過渡的持續時間，單位爲毫秒。
如 duration(2000) ，指持續 2000 毫秒，即  2 秒。

ease()指定過渡方式
- linear：普通的線性變化
- circle：慢慢達到變換的最終狀態
- elastic：帶有彈跳的達到最終狀態
- bounce：在最終狀態處彈跳幾次
  調用時，格式形如： ease(“bounce”)

ease()指定過渡方式

 例如，對整體指定時：
.transition()
.duration(1000)
.delay(500)
如此，圖形整體在延遲 500 毫秒後發生變化，變化的時長爲 1000 毫秒。因此，過渡的總時長爲1500毫秒。
又如，對一個一個的圖形（圖形上綁定了數據）進行指定時：
.transition()
.duration(1000)
.delay(funtion(d,i){
    return 200*i;
})
如此，假設有 10 個元素，那麼第 1 個元素延遲 0 毫秒（因爲 i = 0），第 2 個元素延遲 200 毫秒，第 3 個延遲 400 毫秒，依次類推….整個過渡的長度爲 200 * 9 + 1000 = 2800 毫秒。

七.三大重要概念

Update：有DOM結構與之對應
- 處理方法：更新屬性值
Enter：沒有DOM結構與之對應
- 處理方法：添加元素之後，賦予屬性值
Exit：DOM結構足夠多，要匹配的元素不夠
- 處理方法：刪掉元素

八。動態

交互
- 概念
  - 指的是用戶輸入了某種指令，程序接收到指令後必須做出某種響應
  - 與圖標的交互指的是在圖形元素上設置一個或多個監聽器，當事件發生時，做出相應的反應
- 交互方式
  - 鼠標
    - click
      
      mouseover
      
      mouseout
      
      mousemove
      
      mouseup
      ***沒有dbclick事件，要實現的話用click+延遲判定來模擬
  - 鍵盤
    - keydown - 當用戶按下任意鍵時觸發，按住不放會重複觸發此事件。該事件不會區分字母的大小寫，例如“A”和“a”被視爲一致。
      
      keypress - 當用戶按下字符鍵（大小寫字母、數字、加號、等號、回車等）時觸發，按住不放會重複觸發此事件。該事件區分字母的大小寫。
      
      keyup - 當用戶釋放鍵時觸發，不區分字母的大小寫。
  - 觸屏
    - touchstart - 當觸摸點被放在觸摸屏上時。
      
      touchmove - 當觸摸點在觸摸屏上移動時。
      
      touchend - 當觸摸點從觸摸屏上拿開時。
- 添加交互
```
           var circle = svg.append("circle");
circle.on("click", function(){
//在這裏添加交互內容
});
```

- 佈局

餅狀圖（Pie）、力導向圖（Force）、弦圖（Chord）、樹狀圖（Tree）、集羣圖（Cluster）、捆圖（Bundle）、打包圖（Pack）、直方圖（Histogram）、分區圖（Partition）、堆棧圖（Stack）、矩陣樹圖（Treemap）、層級圖（Hierarchy）。 12 個佈局中，層級圖（Hierarchy）不能直接使用。集羣圖、打包圖、分區圖、樹狀圖、矩陣樹圖是由層級圖擴展來的。如此一來，能夠使用的佈局是 11 個（有 5 個是由層級圖擴展而來）。這些佈局的作用都是將某種數據轉換成另一種數據，而轉換後的數據是利於可視化的。

- 佈局的作用
   - 獲取繪圖所需要的數據

      var dataset=[10,30,20,10,40]
     //定義一個佈局
     var pie=d3.layout.pie()
     //返回值賦值給變量pie，此時pie可以當做函數來使用
     var piedata=pie(dataset)
     //5 個整數被轉換成了 5 個對象（Object） ，每個對象都有變量起始角度（startAngle）和終止角度（endAngle），還有原數據（屬性名稱爲 data）。這些都是繪圖需要的數據。

- 生成器
   - 弧生成器d3.layout.pie();

   ```
          var pie=d3.layout.pie();
    var piedata=pie(dataset)
    console.log(piedata);
    //，5 個整數被轉換成了 5 個對象（Object） ，每個對象都有變量起始角度（startAngle）和終止角度（endAngle），還有原數據（屬性名稱爲 data）。這些都是繪圖需要的數據。
    var  outerRadius=150//外半徑
    var innerRadius=0;//內半徑，爲0則中間沒有空白
    var arc=d3.svg.arc()  //弧生成器
            .innerRadius(innerRadius)  //設置內半徑
            .outerRadius(outerRadius);//設置外半徑
   ```
   - 力導向圖  d3.layout.force()。
   >- 參數
   index - 節點的索引號
 px, py - 節點上一個時刻的座標
 x, y - 節點的當前座標
 weight - 節點的權重
   - 地圖 d3.geo.path()。

D3.js

Node之存儲

Interview(XCJ)

Node之跨域

Git

Interview3

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結