• 創建比例尺

d3.scaleLinear()

• 創建X軸

 this.svg3.append("g")
         .attr("class", "axis")
         .attr("transform", "translate(0," + (this.h - 10) + ")")//設置據下邊界的距離
         .call(d3.axisBottom(xScale))

• 創建Y軸

 this.svg3.append("g")
          .attr("class", "axis")
          .attr("transform", "translate(" + 10 + ",0)")//設置軸據左邊界的距離
          .call(d3.axisLeft(yScale)) 

append()：在選擇集尾部插入元素
insert()：在選擇集前面插入元素
刪除元素很簡單，對于選擇的元素，使用remove();即可

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

d3 scale詳解

domain是定義域，就是坐標系下的值
range是值域，就是映射到svg畫布上的值

1.d3.scaleLinear() 線性比例尺

domain：連續型
range：連續型

scale_l = d3.scaleLinear().domain([1,10]).range([0,100])

線性比例尺超出定義域的部分會按映射拓展

2.d3.scaleBand() 序數比例尺

domain: 離散型
range:連續型
可以理解為用domain將range平均分割

scale_b= d3.scaleBand().domain([1,2,3,4]).range([0,100])

3.d3.scaleOrdinal() 序數比例尺

domain: 離散型
range:離散型
可以簡單理解為map映射

scale_o = d3.scaleOrdinal().domain(['a', 'b', 'c']).range([10, 20, 30])

4.d3.scaleQuantize() 量化比例尺

domain: 連續型
range:離散型
scaleBand的逆變換

scale_q = d3.scaleQuantize().domain([0, 10]).range(['s', 'm', 'l'])

5.d3.scaleTime() 時間比例尺

domain：連續型，是時間
range：連續，是刻度

let scale = d3.scaleTime()
.domain([new Date(2018, 0, 1, 0), new Date(2018, 0, 1, 2)])
.range([0,100])

6.顏色比例尺

d3.schemeCategory10
d3.schemeCategory20
d3.schemeCategory20b
d3.schemeCategory20c

// 定義一個序數顏色比例尺

let color = d3.scaleOrdinal(d3.schemeCategory10)

7.其他比例尺

d3.scaleIdentity() // 恒等比例尺
d3.scaleSqrt() // 乘方比例尺
d3.scalePow() // 類似scaleSqrt的乘方比例尺
d3.scaleLog() // 對數比例尺
d3.scaleQuantile() // 分位數比例尺

點擊事件：

• click：鼠標單擊某元素時觸發，相當于mousedown和mouseup的組合
• mouseover：鼠標放在某元素上觸發
• mouseout：鼠標移出某元素時觸發
• mousemove：鼠標移動時觸發
• mousedown：鼠標按鈕被按下時觸發
• mouseup：鼠標按鈕被松開時觸發
• dblclick：鼠標雙擊時觸發

 .on("mouseout", function() {
            d3.select(this) 
             .transition()
              .delay(1500)
              .duration(1500)