JavaScript可視化圖表庫D3.js API中文參考

2019-11-20 13:21:19

字體：大中小

來源：轉載

供稿：網友

D3 庫所提供的所有 API 都在 d3 命名空間下。d3 庫使用語義版本命名法（semantic versioning）。你可以用 d3.version 查看當前的版本信息。

d3 (核心部分)

選擇集

d3.select - 從當前文檔中選擇一系列元素。
d3.selectAll - 從當前文檔中選擇多項元素。
selection.attr - 設置或獲取指定屬性。
selection.classed - 添加或刪除選定元素的 CSS 類（CSS class）。
selection.style - 設置或刪除 CSS 屬性。style優先級高于attr。
selection.property - 設置或獲原生的屬性值（raw property）。
selection.text - 設置或獲取選定元素的標簽體文本內容。
selection.html - 設置或獲取選定元素的 HTML 內容（類似 innerHTML ）
selection.append - 創建并添加新元素到選定元素后。
selection.insert - 創建并添加新元素到選定元素前。
selection.remove - 從當前文檔對象中刪除選定的元素。
selection.data - 設置或獲取一組元素的綁定數據（get or set data for a group of elements, while computing a relational join.）
selection.enter - 返回缺失元素的占位對象（placeholder），指向綁定的數據中比選定元素集多出的一部分元素。
selection.exit - 返回多余元素的元素集，即選擇元素中比綁定數據多出的一部分。(關于data, enter, exit原理的示例1, 示例2, 示例3)
selection.datum - 設置或獲取單獨元素的數據，不進行關聯。（get or set data for individual elements, without computing a join.）
selection.filter - 根據綁定的數據過濾選擇集。
selection.sort - 根據綁定的數據對選擇的元素進行排序。
selection.order - 對文檔中的元素重排序以匹配選擇集。
selection.on - 添加或刪除事件監聽器。
selection.transition - 啟動一個過渡效果（返回 Transition 對象），可以理解為動畫。
selection.interrupt - 立即停止所有正在進行的動畫動作。
selection.each - 為每個選擇的元素集調用指定的函數。
selection.call - 為當前選擇的元素集調用指定的函數。
selection.empty - 測試選擇集是否為空。
selection.node - 返回選擇集中的第一個元素。
selection.size - 返回選擇集中的元素個數。
selection.select - 選擇所選的元素中的第一個子元素組成新的選擇集。
selection.selectAll - 選擇所選的元素中的多個子元素組成新的選擇集。
d3.selection - 選擇集對象原型（可通過 d3.selection.prototype 為選擇集增強功能）。
d3.event - 獲取當前交互的用戶事件。
d3.mouse - 獲取鼠標的相對某元素的坐標。
d3.touches - 獲取相對某元素的觸控點坐標。

過渡效果

d3.transition - 開始一個動畫過渡。簡單教程
transition.delay - 指定每個元素過渡的延遲時間（單位：毫秒ms）。
transition.duration - 指定每個元素過渡的持續時間（單位：毫秒ms）。
transition.ease - 指定過渡的緩沖函數。
transition.attr - 平滑過渡到新的attr屬性值（起始屬性值為當前屬性）。
transition.attrTween - 在不同attr屬性值之間平滑過渡（起始屬性值可在過渡函數中設置,甚至整個過渡函數都可以自定義）。
transition.style - 平滑過渡到新的style屬性值。
transition.styleTween - 在不同style屬性值之間平滑過渡。
transition.text - 在過渡開始時設置文本內容。
transition.tween - 使某個屬性過渡到一個新的屬性值，該屬性可以是非attr或非style屬性，比如text。
transition.select - 選擇每個當前元素的某個子元素進行過渡。
transition.selectAll - 選擇每個當前元素的多個子元素進行過渡。
transition.filter - 通過數據篩選出當前元素中的部分元素進行過渡。
transition.transition - 當前過渡結束后開始新的過渡。
transition.remove - 過渡結束后移除當前元素。
transition.empty - 如果過渡為空就返回true。如果當前元素中沒有非null元素，則此過渡為空。
transition.node - 返回過渡中的第一個元素。
transition.size - 返回過渡中當前元素的數量。
transition.each - 遍歷每個元素執行操作。不指定觸發類型時，立即執行操作。當指定觸發類型為'start'或'end'時,會在過渡開始或結束時執行操作。
transition.call - 以當前過渡為this執行某個函數。
d3.ease - 定制過渡的緩沖函數。
ease - 緩沖函數。緩沖函數可讓動畫效果更自然，比如elastic緩沖函數可用以模擬彈性物體的運動。是一種插值函數的特例。
d3.timer - 開始一個定制的動畫計時。功能類似于setTimeout，但內部用requestAnimationFrame實現，更高效。
d3.timer.flush - 立刻執行當前沒有延遲的計時?？捎糜谔幚黹W屏問題。
d3.interpolate - 生成一個插值函數，在兩個參數間插值。差值函數的類型會根據輸入參數的類型（數字、字符串、顏色等）而自動選擇。
interpolate - 插值函數。輸入參數在[0, 1]之間。
d3.interpolateNumber - 在兩個數字間插值。
d3.interpolateRound - 在兩個數字間插值，返回值會四舍五入取整。
d3.interpolateString - 在兩個字符串間插值。解析字符串中的數字，對應的數字會插值。
d3.interpolateRgb - 在兩個RGB顏色間插值。
d3.interpolateHsl - 在兩個HSL顏色間插值。
d3.interpolateLab - 在兩個L*a*b*顏色間插值。
d3.interpolateHcl - 在兩個HCL顏色間插值。
d3.interpolateArray - 在兩個數列間插值。d3.interpolateArray( [0, 1], [1, 10, 100] )(0.5); // returns [0.5, 5.5, 100]
d3.interpolateObject - 在兩個object間插值。d3.interpolateArray( {x: 0, y: 1}, {x: 1, y: 10, z: 100} )(0.5); // returns {x: 0.5, y: 5.5, z: 100}
d3.interpolateTransform - 在兩個2D仿射變換間插值。
d3.interpolateZoom - 在兩個點之間平滑地縮放平移。示例
d3.interpolators - 添加一個自定義的插值函數.

數據操作(Working with Arrays)

d3.ascending - 升序排序函數.
d3.descending - 降序排序函數.
d3.min - 獲取數組中的最小值.
d3.max - 獲取數組中的最大值.
d3.extent - 獲取數組的范圍(最小值和最大值).
d3.sum - 獲取數組中數字之和.
d3.mean -獲取數組中數字的算術平均值.
d3.median - 獲取數組中數字的中位數 (相當于 0.5-quantile的值).
d3.quantile - 獲取排好序的數組的一個分位數(quantile).
d3.bisect - 通過二分法獲取某個數在排好序的數組中的插入位置(同d3.bisectRight).
d3.bisectRight - 獲取某個數在排好序的數組中的插入位置(相等的值歸入右邊).
d3.bisectLeft - 獲取某個數在排好序的數組中的插入位置(相等的值歸入左邊).
d3.bisector - 自定義一個二分函數.
d3.shuffle - 洗牌，隨機排列數組中的元素.
d3.permute - 以指定順序排列數組中的元素.
d3.zip - 將多個數組合并成一個數組的數組，新數組的的第i個元素是原來各個數組中第i個元素組成的數組.
d3.transpose - 矩陣轉置，通過d3.zip實現.
d3.pairs - 返回臨近元素對的數組，d3.pairs([1, 2, 3, 4]); // returns [ [1, 2], [2, 3], [3, 4] ].
d3.keys - 返回關聯數組(哈希表、json、object對象)的key組成的數組.
d3.values - 返回關聯數組的value組成的數組.
d3.entries - 返回關聯數組的key-value實體組成的數組, d3.entries({ foo: 42 }); // returns [{key: "foo", value: 42}].
d3.merge - 將多個數組連成一個，類似于原生方法concat. d3.merge([ [1], [2, 3] ]); // returns [1, 2, 3].
d3.range - 獲得一個數列. d3.range([start, ]stop[, step])
d3.nest - 獲得一個nest對象，將數組組織成層級結構. 示例：http://bl.ocks.org/phoebebright/raw/3176159/
nest.key - 為nest層級結構增加一個層級.
nest.sortKeys - 將當前的nest層級結構按key排序.
nest.sortValues - 將葉nest層級按value排序.
nest.rollup - 設置修改葉節點值的函數.
nest.map - 執行nest操作, 返回一個關聯數組(json).
nest.entries - 執行nest操作, 返回一個key-value數組. 如果nest.map返回的結果類似于{ foo: 42 }, 則nest.entries返回的結果類似于[{key: "foo", value: 42}].
d3.map - 將javascript的object轉化為hash,屏蔽了object的原型鏈功能導致的與hash不一致的問題。
map.has - map有某個key就返回true.
map.get - 返回map中某個key對應的value.
map.set - 設置map中某個key對應的value.
map.remove - 刪除map中的某個key.
map.keys - 返回map中所有key組成的數組.
map.values - 返回map中所有value組成的數組.
map.entries - 返回map中所有entry（key-value鍵值對）組成的數組.類似于{ foo: 42 }轉化成[{key: "foo", value: 42}]
map.forEach - 對map中每一個entry執行某個函數.
d3.set - 將javascript的array轉化為set,屏蔽了array的object原型鏈功能導致的與set不一致的問題。set中的value是array中每個值轉換成字符串的結果。set中的value是去重過的。
set.has - 返回set中是否含有某個value.
set.add - 添加某個value.
set.remove - 刪除某個value.
set.values - 返回set中的值組成的數組.set中的value是去重過的.
set.forEach - 對set中每一個value執行某個函數.

JavaScript可視化圖表庫D3.js API中文參考

d3 (核心部分)

選擇集

過渡效果

數據操作(Working with Arrays)

Math