[svg] d3.js (3)

選擇

d3.select - 從當前文檔中選擇一個元素。
d3.selectAll - 從當前文檔中選擇多個元素。
d3.event - 訪問用於交互的當前用戶事件。

selection.text - 取得或設置文本內容。
selection.style - 取得或設置樣式屬性。
selection.data - 在計算相關的連接時，取得或設置一組元素的數據。
selection.append - 創建並追加一個新元素。
selection.remove - 從當前文檔中移除當前元素。
selection.attr - 取得或設置屬性的值。
selection.call - 為當前選擇調用一個函數。
selection.transition - 在選中元素上開啟過渡。
selection.enter - 為缺失的元素返回占位符。（ 綁定數據數量 > 對應元素 ）
selection.exit - 返回不再需要的元素。（ 綁定數據數量 < 對應元素 ）
selection.on - 為交互添加或移除事件監聽器。
selection.each - 為每個選中的元素調用一個函數。

比例尺

d3.scale.linear - 構建一個線性比例尺。
linear.domain - 取得或設置比例尺的定義域。
linear.range - 取得或設置比例尺的輸出范圍。

d3.scale.ordinal - 構造一個序數比例尺。
ordinal.rangeBand - 獲取區間段的寬度。
ordinal.rangeRoundBands - 指定輸出范圍為連續區間，區間段的起點均為整數。

d3.scale.category10 - 構造一個有10種顏色的序數比例尺。
d3.scale.category20 - 構造一個有20種顏色的序數比例尺。

數組

d3.max - 找出一個數組中的最大值。
d3.min - 找出一個數組中的最小值。
d3.descending - 為排序比較兩個值。
map.forEach - 為每個指定的實體調用一個函數。
d3.random.normal - 生成具有正態分布規律的隨機數。
d3.random.normal 生成一個函數，這個函數能夠按正態（高斯）分布隨機生成數值。
要傳入兩個參數，第一個是位置參數，第二個是尺寸參數。

軸

d3.svg.axis - 創建一個新的軸生成器。
axis - 為給定的選擇器或過渡創建或者更新軸。
axis.scale - 設置或者取得比例尺。
axis.orient - 設置或者取得軸的方向。

過渡

d3.transition - 開啟一個動畫過渡。
transition.duration - 指定每個元素的持續時間（以毫秒為單位）。
transition.delay - 指定每個元素的延遲時間（以毫秒為單位）。
transition.ease - 指定一個過渡的緩動函數。
linear 普通的線性變化
circle 慢慢地到達變換的最終狀態
elastic 帶有彈跳的到達最終狀態
bounce 在最終狀態處彈跳幾次

可視化圖形

d3.layout.histogram - 構造一個新的默認的直方圖布局。

histogram.bins - 指定值是如何組織到箱中的。
bins： 分隔數

histogram.frequency - 按頻數或者頻率計算分布。
frequency： 若值為 true，則統計的是個數；若值為 false，則統計的是概率

histogram.range - 取得或設置值得范圍。
range： 區間的范圍

d3.layout.pie - 構造一個新的默認的餅布局。
pie.startAngle - 取得或設置餅布局整體的開始角度。
pie.endAngle -取得或設置餅布局整體的結束角度。
pie.value - 取得或設置值訪問器函數。

(D3 中的力學圖布局是使用韋爾萊積分法計算的，這是一種用於求解牛頓運動方程的數值方法，被廣泛應用於分子動力學模擬以及視頻游戲中。)
d3.layout.force - 使用物理模擬排放鏈接節點的位置。
force.nodes - 取得或者設置布局的節點數組。(點)
force.links - 取得或者設置節點間的鏈接數組。(線)
force.start - 當節點變化時啟動或者重啟模擬。
force.drag - 給節點綁定拖動行為。
force.on - 監聽在計算布局位置時的更新。
force.tick - 運行布局模擬的一步。

force.linkDistance - 取得或者設置鏈接距離。
指定結點連接線的距離，默認為20。
如果距離是一個常數，那么各連接線的長度總是固定的；
如果是一個函數，那么這個函數是作用於各連接線（ source , target ）的。

force.linkStrength - 取得或者設置鏈接強度。
指定連接線的堅硬度，值的范圍為[ 0 , 1 ]，值越大越堅硬。
其直觀感受是：
值為1，則拖動一個頂點A，與之相連的頂點會與A保持linkDistance設定的距離運動
值為0，則拖動一個頂點A，與之相連的頂點不會運動，連接線會被拉長

force.size - 取得或者設置布局大小。
重力的重心位置為 ( x/2 , y/2 )
所有節點的初始位置限定為 [ 0 , x ] 和 [ 0 , y ] 之間（但並非之后也是如此）
如果不指定，默認為 [ 1 , 1 ] 。

force.friction - 取得或者設置摩擦系數。
定義摩擦系數的函數，值的范圍為[ 0 , 1 ]，默認為0.9。
但是這個值其實並非物理意義上的摩擦，其實其意義更接近速度隨時間產生的損耗，這個損耗是針對每一個頂點的。
值為1，則沒有速度的損耗。
值為0，則速度的損耗最大。

force.charge - 取得或者設置電荷強度。
設定引力，是排斥還是吸引，默認值為-30。
值為+，則相互吸引，絕對值越大吸引力越大。
值為-，則相互排斥，絕對值越大排斥力越大。

force.chargeDistance - 取得或者設置最大電荷距離。
設定引力的作用距離，超過這個距離，則沒有引力的作用。
默認值為無窮大。

force.gravity - 取得或者設置重力強度。
以 size 函數設定的中心產生重力，各頂點都會向中心運動，默認值為0.1。
也可以設定為0，則沒有重力的作用。
force.theta - 取得或者設置電荷作用的精度。
頂點數如果過多，計算的時間就會加大（O(n log n)）。
theta 就是為了限制這個計算而存在的，默認值為0.8。
這個值越小，就能把計算限制得越緊。

force.alpha - 取得或者設置力布局的冷卻參數。
設定動畫運動的時間，超過時間后運動就會停止。
其實
force.start() 即 alpha(0.1)
force.stop() 即 alpha(0)

d3.layout.chord - 從關系矩陣生成一個弦圖。
chord.padding - 取得或設置弦片段間的角填充。
chord.sortSubgroups - 取得或設置用於子分組的比較器。
chord.matrix - 取得或設置布局需要的矩陣數據。
chord.chords - 取回計算的弦角度。
chord.groups - 取回計算的分組角度。

d3.layout.cluster - 將實體聚集成樹狀圖。
cluster.size - 取得或設置布局的尺寸。
cluster.nodes - 計算簇布局並返回節點數組。
cluster.links - 技術樹節點之間的父子連接。
cluster.children - 取得或者設置子節點的訪問器函數。

d3.layout.tree - 整齊地排列樹節點。
tree.separation - 取得或設置相鄰節點的間隔函數。

d3.layout.pack - 用遞歸的圓-包生成一個層次布局。
pack.radius - 指定節點半徑（不是由值派生來的）

d3.layout.partition - 遞歸地將節點樹分區為旭日圖或者冰柱圖。

partition.sort - 控制兄弟節點的遍歷順序。
指定對同深度的節點進行排序的函數。
如果不排序，則按照默認順序顯示。
排序函數與JavaScript 相同：

``` function comparator(a, b) { return b.value - a.value; } ```

partition.size - 指定布局的尺寸。
如果是方形的：size( [ width , height ] )
如果是圓形的：size( [ 2 * Math.PI, radius * radius ] )// radius 為圓的半徑

partition.value - 取得或設置用來指定尺寸的值訪問器。
設定用哪一個值來表示節點大小。如：
function value(d) { return d.size; }
這樣設定的話，用節點里的 size 值來表示節點的大小。

partition.children - 取得或設置孩子訪問器。
指定表示子節點的字符串。
默認是：
function children(d) { return d.children; }
表示在 JSON 文件中，子節點的變量符號用 children 表示.

partition.links - 計算樹節點中的父子鏈接。
將上述節點數組傳入后，得到連接線的關系，
起點和終點分別存在 source 和 target 變量中。

partition.nodes - 計算分區布局並返回節點數組。
將根數據傳入后，得到的節點的數組，每個節點添加8個參數：
parent - 父節點
children - 子節點
value - 表示節點的大小，由下面 value() 函數指定的值，父節點的值等於子節點值的和
depth - 節點的深度
x - 節點的x方向的坐標（不一定指x軸方向，跟據 size() 函數的意義而定）
y - 節點的y方向的坐標（同上）
dx - x方向擴展的寬度（同上）
dy - y方向擴展的寬度（同上）

svg形狀

d3.svg.arc - 新建一個弧度生成器。
arc.innerRadius - 獲取或設置內半徑訪問器。
arc.outerRadius - 獲取或設置外半徑訪問器。
arc.centroid - 計算弧中心。

d3.svg.diagonal - 新建一個對角線生成器。
diagonal.projection - 設置或獲取一個可選的點轉換。

請求

d3.json - 請求一個JSON對象。
d3.csv - 請求一個CSV（逗號分隔值）的文件。
d3.tsv - 請求一個TSV（制表符分隔值）的文件。

CSV格式化

d3.dsv - 為指定的分隔符和mime類型創建一個解析器/格式化器。

地理

GeoJSON

GeoJSON是一種對各種地理數據結構進行編碼的格式，
基於Javascript對象表示法的地理空間信息數據交換格式。
GeoJSON對象可以表示幾何、特征或者特征集合。
GeoJSON支持下面幾何類型：點、線、面、多點、多線、多面和幾何集合。
GeoJSON里的特征包含一個幾何對象和其他屬性，特征集合表示一系列特征。

除了GeoJSON D3還支持 TopoJSON

d3.geo.path - 創建一個地理路徑生成器。
path.centroid - 計算給定要素的投影中心。
d3.geo.mercator - 球形墨卡托投影。
projection - 投影指定的位置。
projection.center - 取得或設置投影的中心位置。
projection.scale - 取得或設置投影的縮放系數。
projection.translate - 取得或設置投影的平移位置。

幾何

d3.geom.voronoi - 用默認的訪問器創建一個泰森多邊形布局。
voronoi.triangles - 計算Delaunay mesh為一個三角形密鋪。

行為

d3.behavior.drag - 創建拖動行為。
drag.origin - 設置拖動行為的原點。
drag.on - 監聽拖動事件。
dragstart、dragend、drag。

d3.behavior.zoom - 創建縮放行為。
zoom.scaleExtent - 可選參數，比例因子范圍。
zoom.scale - 當前的比例因子。
zoom.on - 事件監聽器。

data 與 datum 的區別

    datum()：將指定數據賦值給被選擇元素。
    data()：將數據數組與選擇集的元素結合。

同樣綁定3位的數組

datum：

對於選擇集中的每一個元素，都為其增加一個__data__屬性，屬性值為datum(value)的參數value。
此處的value並非一定要是number（數值）型，
也可以是string（字符串）、boolean（布爾型）和object（對象），
無論是什么類型，其工作過程都是給__data__賦值。
如果使用undefined和null作為參數，則將不會創建__data__屬性。

在被綁定數據的選擇集中添加元素后，新元素也會具有被綁定數據。

源代碼：

    d3_selectionPrototype.datum = function(value) { return arguments.length ? this.property("__data__", value) : this.property("__data__"); }; 

data