1. 程式人生 > >D3js-API介紹【中】

D3js-API介紹【中】

模擬 數組的數組 median factor from position 依據 tracking -a

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


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 - 立馬運行當前沒有延遲的計時。

可用於處理閃屏問題。
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運行某個函數.
Math
d3.random.normal - 利用正態分布產生一個隨機數.
d3.random.logNormal - 利用對數正態分布產生一個隨機數.
d3.random.irwinHall - 利用Irwin–Hall分布(簡單可行而且easy編程的正態分布實現方法)產生一個隨機數.
d3.transform - 將svg的tranform格式轉化為標準的2D轉換矩陣字符串格式.
加載外部資源(Loading External Resources)
d3.xhr - 發起XMLHttpRequest請求獲取資源。
xhr.header - 設置 request header。


xhr.mimeType - 設置 Accept request header,並重寫 response MIME type。
xhr.response - 設置response返回值轉化函數。如 function(request) { return JSON.parse(request.responseText); }
xhr.get - 發起GET請求。


xhr.post - 發起POST請求。
xhr.send - 以指定的方法和數據發起請求。
xhr.abort - 終止當前請求。
xhr.on - 為請求加入”beforesend”, “progress”, “load” 或 “error” 等事件監聽器。
d3.text - 請求一個text文件。
d3.json - 請求一個JSON。
d3.html - 請求一個html文本片段。


d3.xml - 請求一個XML文本片段。
d3.csv - 請求一個CSV(comma-separated values, 逗號分隔值)文件。
d3.tsv - 請求一個TSV(tab-separated values, tab分隔值)文件。
字符串格式化(String Formatting)
d3.format - 將數字轉化成指定格式的字符串。轉化的格式很豐富,且很智能。
d3.formatPrefix - 以指定的值和精度獲得一個[SI prefix]對象。這個函數可用來自己主動推斷數據的量級。 如K(千),M(百萬)等等。演示樣例: var prefix = d3.formatPrefix(1.21e9); console.log(prefix.symbol); // “G”; console.log(prefix.scale(1.21e9)); // 1.21
d3.requote - 將字符串轉義成可在正則表達式中使用的格式。如 d3.requote(‘$‘); // return “\$”
d3.round - 設置某個數按小數點後多少位取整。

與toFixed()類似,但返回格式為number。

如 d3.round(1.23); // return 1; d3.round(1.23, 1); // return 1.2; d3.round(1.25, 1); // return 1.3
CSV 格式化 (d3.csv)
d3.csv - 獲取一個CSV (comma-separated values, 冒號分隔值)文件。
d3.csv.parse - 將CSV文件字符串轉化成object的數組,object的key由第一行決定。

如: [{"Year": "1997", "Length": "2.34"}, {"Year": "2000", "Length": "2.38"}]
d3.csv.parseRows - 將CSV文件字符串轉化成數組的數組。如: [ ["Year", "Length"],["1997", "2.34"],["2000", "2.38"] ]
d3.csv.format - 將object的數組轉化成CSV文件字符串,是d3.csv.parse的逆操作。


d3.csv.formatRows - 將數組的數組轉化成CSV文件字符串,是d3.csv.parseRows的逆操作。
d3.tsv - 獲取一個TSV (tab-separated values, tab分隔值)文件。
d3.tsv.parse - 類似於d3.csv.parse。
d3.tsv.parseRows - 類似於d3.csv.parseRows。
d3.tsv.format - 類似於d3.csv.format。


d3.tsv.formatRows - 類似於d3.csv.formatRows。
d3.dsv - 創建一個類似於d3.csv的文件處理對象,能夠自己定義分隔符和mime type。如:var dsv = d3.dsv(“|”, “text/plain”);
顏色
d3.rgb - 指定一種顏色。創建一個RGB顏色對象。

支持多種顏色格式的輸入。
rgb.brighter - 增強顏色的亮度,變化幅度由參數決定。
rgb.darker - 減弱顏色的亮度,變化幅度由參數決定。
rgb.hsl - 將RGB顏色對象轉化成HSL顏色對象。
rgb.toString - RGB顏色轉化為字符串格式。


d3.hsl - 創建一個HSL顏色對象。支持多種顏色格式的輸入。
hsl.brighter - 增強顏色的亮度,變化幅度由參數決定。


hsl.darker - 減弱顏色的亮度。變化幅度由參數決定。


hsl.rgb - 將HSL顏色對象轉化成RGB顏色對象。
hsl.toString - HSL顏色轉化為字符串格式。


d3.lab - 創建一個Lab顏色對象。

支持多種顏色格式的輸入。
lab.brighter - 增強顏色的亮度。變化幅度由參數決定。
lab.darker - 減弱顏色的亮度。變化幅度由參數決定。


lab.rgb - 將Lab顏色對象轉化成RGB顏色對象。
lab.toString - Lab顏色轉化為字符串格式。
d3.hcl - 創建一個HCL顏色對象。

支持多種顏色格式的輸入。
hcl.brighter - 增強顏色的亮度,變化幅度由參數決定。
hcl.darker - 減弱顏色的亮度。變化幅度由參數決定。


hcl.rgb - 將HCL顏色對象轉化成RGB顏色對象。
hcl.toString - HCL顏色轉化為字符串格式。
命名空間
d3.ns.prefix - 獲取或擴展已知的XML命名空間。
d3.ns.qualify - 驗證命名空間前綴是否存在, 如”xlink:href”中xlink是已知的命名空間。
內部方法(Internals)
d3.functor - 函數化。將非函數變量轉化為僅僅返回該變量值的函數。

輸入函數,則返回原函數;輸入值。則返回一個函數。該函數僅僅返回原值。
d3.rebind - 將一個對象的方法綁定到還有一個對象上。
d3.dispatch - 創建一個定制的事件。
dispatch.on - 加入或移除一個事件監聽器。對一個事件可加入多個監聽器。
dispatch.type - 觸發事件。當中‘type‘為要觸發的事件的名稱。
d3.scale(Scales)
定量變換(Quantitative)
d3.scale.linear - 創建一個線性定量變換。(建議參考源代碼以深入理解各種變換。)
linear - 輸入一個定義域的值,返回一個值域的值。
linear.invert - 反變換。輸入值域值返回定義域值。
linear.domain - get或set定義域。
linear.range - get或set值域。
linear.rangeRound - 設置值域,並對結果取整。


linear.interpolate - get或set變換的插值函數,如將默認的線性插值函數替換成取整的線性插值函數d3_interpolateRound。
linear.clamp - 設置值域是否閉合。默認不閉合。當值域閉合時。假設插值結果在值域之外。會取值域的邊界值。

如值域為[1, 2],插值函數的計算結果為3。假設不閉合,終於結果為3。假設閉合,終於結果為2。
linear.nice - 擴展定義域範圍使定義域更規整。如[0.20147987687960267, 0.996679553296417] 變成 [0.2, 1]。
linear.ticks - 從定義域中取出有代表性的值。

通經常使用於坐標軸刻度的選取。


linear.tickFormat - 獲取格式轉化函數,通經常使用於坐標軸刻度的格式轉化。

如:var x = d3.scale.linear().domain([-1, 1]); console.log(x.ticks(5).map(x.tickFormat(5, “+%”))); // ["-100%", "-50%", "+0%", "+50%", "+100%"]
linear.copy - 從已有的變換中復制出一個變換。


d3.scale.sqrt - 創建一個求平方根的定量轉換。
d3.scale.pow - 創建一個指數變換。

(可參考linear相應函數的凝視)
pow - 輸入一個定義域的值,返回一個值域的值。
pow.invert - 反變換。輸入值域值返回定義域值。


pow.domain - get或set定義域。


pow.range - get或set值域。
pow.rangeRound - 設置值域,並對結果取整。
pow.interpolate - get或set變換的插值函數。
pow.clamp - 設置值域是否閉合,默認不閉合。


pow.nice - 擴展定義域範圍使定義域更規整。


pow.ticks - 從定義域中取出有代表性的值。

通經常使用於坐標軸刻度的選取。
pow.tickFormat - 獲取格式轉化函數。通經常使用於坐標軸刻度的格式轉化。
pow.exponent - get或set指數的冪次。

默覺得1次冪。


pow.copy - 從已有的變換中復制出一個變換。
d3.scale.log - 創建一個對數變換。(可參考linear相應函數的凝視)
log - 輸入一個定義域的值。返回一個值域的值。
log.invert - 反變換。輸入值域值返回定義域值。
log.domain - get或set定義域。


log.range - get或set值域。
log.rangeRound - 設置值域,並對結果取整。
log.interpolate - get或set變換的插值函數。
log.clamp - 設置值域是否閉合,默認不閉合。


log.nice - 擴展定義域範圍使定義域更規整。
log.ticks - 從定義域中取出有代表性的值。

通經常使用於坐標軸刻度的選取。


log.tickFormat - 獲取格式轉化函數,通經常使用於坐標軸刻度的格式轉化。


log.copy - 從已有的變換中復制出一個變換。
d3.scale.quantize - 創建一個quantize線性變換,定義域為一個數值區間。值域為幾個離散值。


quantize - 輸入數值,返回離散值。

如: var q = d3.scale.quantize().domain([0, 1]).range([‘a‘, ‘b‘, ‘c‘]); //q(0.3) === ‘a‘, q(0.4) === ‘b‘, q(0.6) === ‘b‘, q(0.7) ===‘c;
quantize.invertExtent - 返回得到某個離散值的值域範圍。

// q.invertExtent(‘a‘) 的結果為 [0, 0.3333333333333333]
quantize.domain - get或set變換的定義域。
quantize.range - get或set變換的值域。


quantize.copy - 從已有的變換中復制出一個變換。
d3.scale.threshold - 構建一個threshold(閾值)線性變換。

定義域為分隔值數值序列,值域為離散值。它與quantize的差別是quantize指定的值域為一個區間。然後均分這個區間為多個小區間,以相應各離散值。threshold則指定各小區間的邊界分隔值。演示樣例: var t = d3.scale.threshold().domain([0, 1]).range([‘a‘, ‘b‘, ‘c‘]); t(-1) === ‘a‘; t(0) === ‘b‘; t(0.5) === ‘b‘; t(1) === ‘c‘; t(1000) === ‘c‘; t.invertExtent(‘a‘); //returns [undefined, 0] t.invertExtent(‘b‘); //returns [0, 1] t.invertExtent(‘c‘); //returns [1, undefined]
threshold - 輸入數值,返回離散值。


threshold.invertExtent - 輸入離散值。返回數值。
threshold.domain - get或set變換的定義域。
threshold.range - get或set變換的值域。


threshold.copy - 從已有的變換中復制出一個變換。
d3.scale.quantile - 構建一個quantile線性變換。用法與quantize全然類似。差別是quantile依據中位數來分隔區間,quantize依據算數平均值來分隔區間。

example
quantile - 輸入數值。返回離散值。


quantile.invertExtent - 輸入離散值,返回數值。


quantile.domain - get或set變換的定義域。
quantile.range - get或set變換的值域。


quantile.quantiles - 獲得quantile變換的分隔值。演示樣例: var q = d3.scale.quantile().domain([0, 1]).range([‘a‘, ‘b‘, ‘c‘]); q.quantiles() returns [0.33333333333333326, 0.6666666666666665]
quantile.copy - 從已有的變換中復制出一個變換。


d3.scale.identity - 構建一個identity線性變換。特殊的linear線性變換。此變換定義域和值域同樣,僅僅在一些d3內部的axis或brush模塊中用到。
identity - identity線性變換函數。

返回輸入值。
identity.invert - 和identity函數同樣,返回輸入值。
identity.domain - get或set變換的定義域。
identity.range - get或set變換的值域。
identity.ticks - 從定義域中取出有代表性的值。

通經常使用於坐標軸刻度的選取。


identity.tickFormat - 獲取格式轉化函數,通經常使用於坐標軸刻度的格式轉化。


identity.copy - 從已有的變換中復制出一個變換。
序數變換(Ordinal)
d3.scale.ordinal - 構建一個ordinal變換對象。

ordinal變換的輸入定義域和輸出值域都是離散的。而quantitative變換的輸入定義域是連續的。這是兩者最大的不同。
ordinal - 輸入一個離散值,返回一個離散值。不在當前定義域中的輸入值會自己主動增加定義域。


ordinal.domain - get或set變換的定義域。


ordinal.range - get或set變換的值域。
ordinal.rangePoints - 用幾個離散點來切割一個連續的區間。詳情請看鏈接中的圖例。
ordinal.rangeBands - 用幾個離散區間來切割一個連續的區間。詳情請看鏈接中的圖例。
ordinal.rangeRoundBands - 用幾個離散區間來切割一個連續的區間,區間邊界和寬度會取整。詳情請看鏈接中的圖例。
ordinal.rangeBand - 獲取離散區間的寬度。
ordinal.rangeExtent - 獲取輸出域的最小最大值。
ordinal.copy - 從已有的變換中復制出一個變換。
d3.scale.category10 - 用10種顏色構建一個ordinal變換。
d3.scale.category20 - 用20種顏色構建一個ordinal變換。
d3.scale.category20b - 用另外20種顏色構建一個ordinal變換。


d3.scale.category20c - 用另外20種顏色構建一個ordinal變換。


d3.svg (SVG)
Shapes
d3.svg.line - 創建一個線段生成器.
line - 在折線圖裏生成一段折線.
line.x - 設置或獲取x軸訪問器.
line.y - 設置或獲取y軸訪問器
line.interpolate - 設置或獲取插值模式.
line.tension - 獲取或設置曲線張力訪問器(cardinal spline tension).
line.defined - 定義線條在某一點是否存在.
d3.svg.line.radial - 創建輻射線生成器.
line - 生成分段的線性曲線。用於緯度線/雷達線圖表.
line.radius - 獲取或設置radius訪問器.
line.angle - 獲取或設置angle訪問器.
line.defined - 設置或獲取線條定義存取器.
d3.svg.area - 創建一個新的區域生成器.
area - 生成一個線性的區域,用於區域圖表.
area.x - 獲取或設置x坐標的訪問器.
area.x0 - 獲取或設置x0坐標(基線)的訪問器.
area.x1 - 獲取或設置x1坐標(背線)的訪問器.
area.y - 獲取或設置y坐標的訪問器.
area.y0 - 獲取或設置y0坐標(基線)的訪問器.
area.y1 - 獲取或設置y1坐標(背線)的訪問器.
area.interpolate - 獲取或設置插值模式.
area.tension - 獲取或設置張力訪問器(the cardinal spline tension).
area.defined - 推斷獲取或定義區域定義存取器.
d3.svg.area.radial - 創建新的區域生成器.
area - 生成分段的線性區域,用於緯度/雷達圖表.
area.radius - 獲取或設置radius訪問器.
area.innerRadius - 獲取或設置內部的radius(基線)訪問器.
area.outerRadius - 獲取或設置外部的radius(背線)訪問器.
area.angle - 獲取或設置angle訪問器.
area.startAngle - 獲取或設置內部的angle(基線)訪問器.
area.endAngle - 獲取或設置外部的angle(背線)訪問器.
area.defined - 推斷獲取或定義區域定義存取器.
d3.svg.arc - 創建弧度生成器.
arc - 生成一個線性弧度,用於餅圖或甜甜圈圖.
arc.innerRadius - 獲取或設置內部的半徑訪問器.
arc.outerRadius - 獲取或設置外部的半徑訪問器.
arc.startAngle - 獲取或設置起始角度訪問器.
arc.endAngle - 獲取或設置結束角度訪問器.
arc.centroid - 計算弧的重心點.
d3.svg.symbol - 創建符號生成器.
symbol - 生成指定的符號,用於散列圖.
symbol.type - 獲取或設置符號類型訪問器.
symbol.size - 獲取或設置符號尺寸(in square pixels) 訪問器.
d3.svg.symbolTypes - 被支持的符號類型數組.
d3.svg.chord - 創建新的弦生成器.
chord - 生成一個二次貝塞爾曲線連接兩個弧, 用於弦圖.
chord.radius - 獲取或設置弧半徑訪問器.
chord.startAngle - 獲取或設置弧起始角度訪問器.
chord.endAngle - 獲取或設置弧結束角度訪問器.
chord.source - 獲取或設置源弧度訪問器.
chord.target - 獲取或設置目標弧度訪問器.
d3.svg.diagonal - 創建新的斜線生成器.
diagonal - 生成一個二維貝塞爾連接器, 用於節點連接圖.
diagonal.source - 獲取或設置源點訪問器.
diagonal.target - 獲取或設置目標點訪問器.
diagonal.projection - 獲取或設置一個可選的點變換器.
d3.svg.diagonal.radial - 創建一個新的斜線生成器.
diagonal - 創建一個二維貝塞爾連接器,用於節點連接圖.
坐標軸(Axes)
d3.svg.axis - 創建一個axis生成器。


axis - 正式在頁面中生成axis。
axis.scale - get或set坐標軸的scale尺度變換,該尺度變換設定了數值和像素位置的轉換規則。


axis.orient - get或set坐標軸刻度方向。
axis.ticks - 控制坐標軸刻度的產生方式。
axis.tickValues - 設置特定的坐標軸的值。
axis.tickSize - 指定坐標軸上刻度線的像素長度。


axis.innerTickSize - get或set坐標軸小刻度線的像素長度。
axis.outerTickSize - get或set坐標軸大刻度線的像素長度。
axis.tickPadding - 指定坐標軸刻度和刻度文字之間的像素距離。
axis.tickFormat - 設置刻度文字的格式。


Controls
d3.svg.brush - 點擊拖拽選擇一個二維區域。
brush - 在頁面中某個區域中正式綁定一個brush。
brush.x - get或set brush的x變換,用於水平方向的拖拽。
brush.y - get或set brush的y變換,用於垂直方向的拖拽。
brush.extent - get或set brush的選取範圍(extent)。
brush.clear - 設置brush的選取範圍(extent)為空。


brush.empty - 推斷brush的選取範圍(extent)是否為空。


brush.on - get或set brush的事件監聽器。可監聽3種事件:brushstart, brush, brushend。


brush.event - 通過程序觸發監聽事件。在通過程序設置extent後使用。
d3.time (Time)
時間格式轉換(Time Formatting)
d3.time.format - 創建基於某種時間格式的本地時間格式轉換器。


format - 將一個date對象轉換成特定時間格式的字符串。
format.parse - 將特定時間格式的字符串轉換成date對象。


d3.time.format.utc - 創建基於某種時間格式的世界標準時間(UTC)格式轉換器。
d3.time.format.iso - 創建基於某種時間格式的ISO世界標準時間(ISO 8601 UTC)格式轉換器。
時間變換(Time Scales)
d3.time.scale - 創建一個線性時間變換。定義域為數值區間,值域為時間區間。

經常使用於時間坐標軸的創建。詳情可參考d3.scale.linear。
scale - 輸入為一個數值,返回為一個時間。
scale.invert - 反變換,輸入時間返回數值。
scale.domain - get或set變換的定義域。
scale.nice - 擴展定義域範圍使定義域更規整。


scale.range - get或set變換的值域。
scale.rangeRound - 設置值域,並對結果取整。
scale.interpolate - get或set變換的插值函數,如將默認的線性插值函數替換成指數插值函數。


scale.clamp - 設置值域是否閉合,默認不閉合。當值域閉合時,假設插值結果在值域之外。會取值域的邊界值。詳情參考linear.clamp。
scale.ticks - 從定義域中取出有代表性的值。通經常使用於坐標軸刻度的選取。
scale.tickFormat - 獲取格式轉化函數,通經常使用於坐標軸刻度的格式轉化。
scale.copy - 從已有的時間變換中復制出一個變換。


Time Intervals
d3.time.interval - 返回一個對於本地時間時間間隔器.
interval - 效果同interval.floor方法.
interval.range - 返回指定區間內日期.
interval.floor - 下舍入到近期的間隔值.
interval.round - 上舍入或下舍入到近期的間隔值.
interval.ceil - 上舍入到近期的間隔值.
interval.offset - 返回指定時間間隔的日期偏移量.
interval.utc - 返回相應的UTC時間間隔.
d3.time.day - 返回指定時間基於天起始的時間(默認起始是12:00am).
d3.time.days - 返回指定時間區間和間隔條件的基於天的全部時間,效果同day.range.
d3.time.dayOfYear - 計算指定時間在年中的天數.
d3.time.hour - 返回指定時間基於小時起始的時間(e.g., 1:00 AM).
d3.time.hours - 返回指定時間區間和間隔條件的基於小時的全部時間, 效果同hour.range.
d3.time.minute - 返回指定時間基於分鐘起始的時間 (e.g., 1:02 AM).
d3.time.minutes - 返回指定時間區間和間隔條件的基於分鐘的全部時間,效果同minute.range.
d3.time.month - 返回指定時間基於月起始的時間(e.g., February 1, 12:00 AM).
d3.time.months - 返回指定時間區間和間隔條件的基於月的全部時間,效果同month.range.
d3.time.second - 返回指定時間基於秒起始的時間(e.g., 1:02:03 AM).
d3.time.seconds - 返回指定時間區間和間隔條件的基於秒的全部時間,效果同second.range.
d3.time.sunday - 返回指定時間基於Sunday起始的時間(e.g., February 5, 12:00 AM).
d3.time.sundays - 返回指定時間區間和間隔條件的基於sunday的全部時間, 效果同sunday.range.
d3.time.sundayOfYear - 計算以sunday為基點的指定時間在一年中的周數.
d3.time.monday - every Monday (e.g., February 5, 12:00 AM).
d3.time.mondays - alias for monday.range.
d3.time.mondayOfYear - computes the monday-based week number.
d3.time.tuesday - every Tuesday (e.g., February 5, 12:00 AM).
d3.time.tuesdays - alias for tuesday.range.
d3.time.tuesdayOfYear - computes the tuesday-based week number.
d3.time.wednesday - every Wednesday (e.g., February 5, 12:00 AM).
d3.time.wednesdays - alias for wednesday.range.
d3.time.wednesdayOfYear - computes the wednesday-based week number.
d3.time.thursday - every Thursday (e.g., February 5, 12:00 AM).
d3.time.thursdays - alias for thursday.range.
d3.time.thursdayOfYear - computes the thursday-based week number.
d3.time.friday - every Friday (e.g., February 5, 12:00 AM).
d3.time.fridays - alias for friday.range.
d3.time.fridayOfYear - computes the friday-based week number.
d3.time.saturday - every Saturday (e.g., February 5, 12:00 AM).
d3.time.saturdays - alias for saturday.range.
d3.time.saturdayOfYear - computes the saturday-based week number.
d3.time.week - alias for sunday.
d3.time.weeks - alias for sunday.range.
d3.time.weekOfYear - alias for sundayOfYear.
d3.time.year - 返回指定時間基於年起始的時間(e.g., January 1, 12:00 AM).
d3.time.years - 返回指定時間區間和間隔條件的全部時間,效果同year.range.
構圖(d3.layout)
Bundle
d3.layout.bundle - construct a new default bundle layout.
bundle - apply Holten‘s hierarchical bundling algorithm to edges.
弦圖(Chord)
d3.layout.chord - 初始化一個弦圖對象, 返回一個 Chord 實例
chord.matrix - 設置或者獲取弦圖實例相應的矩陣數據
chord.padding - 設置或獲取弦圖各段圓弧之間的間隔角度
chord.sortGroups - 設置或獲取矩陣分組的排序函數
chord.sortSubgroups - 設置或獲取矩陣二級分組的排序函數
chord.sortChords - 設置或獲取弦圖在z序上的排序函數(決定哪一組顯示在最上層)
chord.chords - 該函數會將參數處理成對 chord 更友好的格式並返回, 若沒有提供參數, 會調用matrix()來獲取數據
chord.groups - 該函數參數處理成更易於理解的分組信息, 若沒有提供參數, 會調用matrix()來獲取數據
集群(Cluster)
d3.layout.cluster - 用默認設置生成一個集群布局對象.
cluster.sort - 獲取或設置一個函數, 用來給兄弟節點(同一父結點的子結點)的排序.
cluster.children - 獲取或設置子結點的訪問器.
cluster.nodes - 計算並返回指定結點的子結點在集群中的信息(坐標,深度等).
cluster.links - 指定一個子結點數組(一般是nodes函數返回值), 計算它們與父結點的連接信息.
cluster.separation - 獲取或設置相鄰結點間的間隔(不僅限於兄弟結點).
cluster.size - 獲取或設置布局的 寬 和 高 的大小.
cluster.nodeSize - 為結點指定大小.
力學(Force)
d3.layout.force -節點(node)基於物理模擬的位置連接。
force.on - 監聽布局位置的變化。

(僅支持”start”,”step”,”end”三種事件)
force.nodes - 獲得或設置布局中的節點(node)陣列組。
force.links - 獲得或設置布局中節點間的連接(Link)陣列組。

.
force.size - 獲取或設置布局的 寬 和 高 的大小.
force.linkDistance - 獲取或設置節點間的連接線距離.
force.linkStrength - 獲取或設置節點間的連接強度.
force.friction - 獲取或設置摩擦系數.
force.charge - 獲取或設置節點的電荷數.(電荷數決定結點是互相排斥還是吸引)
force.gravity - 獲取或設置節點的引力強度.
force.theta - 獲取或設置電荷間互相作用的強度.
force.start - 開啟或恢復結點間的位置影響.
force.resume - 設置冷卻系數為0.1,並又一次調用start()函數.
force.stop - 立馬終止結點間的位置影響.(等同於將冷卻系數設置為0)
force.alpha - 獲取或設置布局的冷卻系數.(冷卻系數為0時,節點間不再互相影響)
force.tick - 讓布局執行到下一步.
force.drag - 獲取當前布局的拖拽對象實例以便進一步綁定處理函數.
層級布局(Hierarchy)
d3.layout.hierarchy - 獲得一個自己定義的層級布局的實現.
hierarchy.sort - 獲取或設置一個函數, 用來給兄弟節點(同一父結點的子結點)的排序.
hierarchy.children - 獲取或設置子結點的訪問器.
hierarchy.nodes - 計算並返回指定結點的子結點信息.
hierarchy.links - 指定一個子結點數組(一般是nodes函數返回值), 計算它們與父結點的連接信息.
hierarchy.value - 獲取或設置結點的值訪問器.
hierarchy.revalue - 又一次計算層級布局.
直方圖(Histogram)
d3.layout.histogram - 構建一個默認直方圖(用來表示一組離散數字的分布,橫軸表示區間,縱軸表示區間內樣本數量或樣本百分比).
histogram.value - 獲取或設置值訪問器.
histogram.range - 獲取或設置合法值範圍.
histogram.bins - 指定怎樣將數據分組到不同的區間(bin)裏, 返回一個構造函數 .
histogram - 依據已設置的區間將數據分組,返回已分組的二維數組(compute the distribution of data using quantized bins).
histogram.frequency - 設置直方圖Y軸值是區間內數據的總量還是百分比(compute the distribution as counts or probabilities).
層包(Pack)
d3.layout.pack - 用遞歸的圓環表現一個多層級布局.
pack.sort - 獲取或設置一個函數, 用來給兄弟節點(同一父結點的子結點)排序.
pack.children - 獲取或設置子結點的訪問器.
pack.nodes - 計算並返回指定結點的子結點信息.
pack.links - 指定一個子結點數組(一般是nodes函數返回值), 計算它們與父結點的連接信息.
pack.value - 獲取或設置一個函數, 用來計算圓環的大小(近似值).
pack.size - 設置整個布局畫布的 寬 and 高.
pack.radius - 假設不想結點半徑與結點的值同樣, 能夠傳入一個函數用來計算結點半徑.
pack.padding - 指定相鄰結點之點的間距(近似值).
分區(Partition)
d3.layout.partition - 將一棵樹遞歸的分區.
partition.sort - 獲取或設置一個函數, 用來給兄弟節點(同一父結點的子結點)排序.
partition.children - 獲取或設置子結點的訪問器.
partition.nodes - 計算並返回指定結點的子結點信息.
partition.links - 指定一個子結點數組(一般是nodes函數返回值), 計算它們與父結點的連接信息.
partition.value - 設置一個函數來來計算分區的值.
partition.size - 設置整個布局畫布的 寬 and 高.
餅圖(Pie)
d3.layout.pie - 構建一個默認的餅圖.
pie - 該函數將傳入的原始參數轉換成可用於餅圖或者環形圖的數據結構.
pie.value - 獲取或設置值訪問器.
pie.sort - 設置餅圖順時針方向的排序方法.
pie.startAngle - 設置或獲取整個餅圖的起始角度.
pie.endAngle - 設置或獲取整個餅圖的終止角度.
堆疊圖(Stack)
d3.layout.stack - 構建一個默認的堆疊圖(用來展示一系列x軸同樣的面積圖或者立方圖).
stack - 計算每一層的基線.
stack.values - 設置或者獲取每層的值訪問器.
stack.order - 設置每層的排序.
stack.offset - 指定總的基線算法.
stack.x - 設置或獲取每層的x軸訪問器.
stack.y - 設置或獲取每層的y軸訪問器.
stack.out - 設置或獲取用來儲存基線的輸出函數.
樹(Tree)
d3.layout.tree - position a tree of nodes tidily.
tree.sort - 設置或獲取一個函數, 用來給兄弟節點(同一父結點的子結點)排序.
tree.children - 設置或獲取子結點的訪問器.
tree.nodes - 計算並返回指定結點的子結點信息.
tree.links - 指定一個子結點數組(一般是nodes函數返回值), 計算它們與父結點的連接信息.
tree.separation - 設置或獲取相隔結點之間的間隔計算函數.
tree.size - 指定整個布局的寬和高.
tree.nodeSize - 給所有結點指定一個固定的大小(會導致tree.size失效).
矩陣樹(Treemap)
d3.layout.treemap - 返回一個矩陣樹對象(用矩陣來展示一顆樹).
treemap.sort - 設置或獲取一個函數, 用來給兄弟節點(同一父結點的子結點)排序.
treemap.children - 設置或獲取子結點的訪問器.
treemap.nodes - 計算並返回指定結點的子結點信息.
treemap.links - 指定一個子結點數組(一般是nodes函數返回值), 計算它們與父結點的連接信息.
treemap.value - 設置或獲取一個用來計算單元格大小的值訪問器.
treemap.size - 指定整個布局的寬和高.
treemap.padding - 指定父結點和子結點的間距.
treemap.round - 禁用或啟用邊界補償.
treemap.sticky - 讓布局更”粘”以保證在更新數據時有平滑的動畫效果.
treemap.mode - 更改矩陣樹的布局算法.
d3.geo (Geography)
Paths
d3.geo.path - 創建一個新的地理路徑生成器.
path - 投射指定的特性而且渲染到上下文.
path.projection - 獲取活設置地理投影.
path.context - 獲取活設置渲染上下文.
path.pointRadius -獲取或設置半徑去現實點的特性.
path.area - 計算指定特性的投射區域.
path.centroid - 計算指定特性的投射重心點.
path.bounds - 計算指定特性的投射邊界.
d3.geo.graticule - 創建地理坐標網生成器.
graticule - 生產一個子午線或平行線的MultiLineStrings.
graticule.lines - 生成一個子午線和平行線的LineString的數組.
graticule.outline - 生成一個表示該坐標網的外框多邊形.
graticule.extent - 獲取或設置基本的和次要的範圍.
graticule.majorExtent - 獲取或設置主要範圍.
graticule.minorExtent - 獲取或設置次要範圍.
graticule.step - 獲取或設置主要和次要的步間隔.
graticule.majorStep - 獲取或設置基本的步間隔.
graticule.minorStep - 獲取或設置次要的步間隔.
graticule.precision - 設置或者獲取橫向精度.
d3.geo.circle - 創建一個圓形的生成器.
circle - 使用多邊形來生成一個分段的圓形.
circle.origin - 通過橫向和縱向坐標來指定原點.
circle.angle - 指定以度為單位的角半徑.
circle.precision - 指定分段圓的精度.
d3.geo.area - 依據給定特征計算球面面積.
d3.geo.bounds - compute the latitude-longitude bounding box for a given feature.
d3.geo.centroid - compute the spherical centroid of a given feature.
d3.geo.distance - compute the great-arc distance between two points.
d3.geo.interpolate - interpolate between two points along a great arc.
d3.geo.length - compute the length of a line string or the circumference of a polygon.
d3.geo.rotation - create a rotation function for the specified angles [λ, φ, γ].
rotation - rotate the given location around the sphere.
rotation.invert - inverse-rotate the given location around the sphere.
Projections
d3.geo.projection - create a standard projection from a raw projection.
projection - project the specified location.
projection.invert - invert the projection for the specified point.
projection.rotate - get or set the projection‘s three-axis rotation.
projection.center - get or set the projection‘s center location.
projection.translate - get or set the projection‘s translation position.
projection.scale - get or set the projection‘s scale factor.
projection.clipAngle - get or set the radius of the projection‘s clip circle.
projection.clipExtent - get or set the projection‘s viewport clip extent, in pixels.
projection.precision - get or set the precision threshold for adaptive resampling.
projection.stream - wrap the specified stream listener, projecting input geometry.
d3.geo.projectionMutator - create a standard projection from a mutable raw projection.
d3.geo.albers - the Albers equal-area conic projection.
albers.parallels - get or set the projection‘s two standard parallels.
d3.geo.albersUsa - a composite Albers projection for the United States.
d3.geo.azimuthalEqualArea - the azimuthal equal-area projection.
d3.geo.azimuthalEquidistant - the azimuthal equidistant projection.
d3.geo.conicConformal - the conic conformal projection.
d3.geo.conicEquidistant - the conic equidistant projection.
d3.geo.conicEqualArea the conic equal-area (a.k.a. Albers) projection.
d3.geo.equirectangular - the equirectangular (plate carreé) projection.
d3.geo.gnomonic - the gnomonic projection.
d3.geo.mercator - the spherical Mercator projection.
d3.geo.orthographic - the azimuthal orthographic projection.
d3.geo.stereographic - the azimuthal stereographic projection.
d3.geo.azimuthalEqualArea.raw - the raw azimuthal equal-area projection.
d3.geo.azimuthalEquidistant.raw - the azimuthal equidistant projection.
d3.geo.conicConformal.raw - the raw conic conformal projection.
d3.geo.conicEquidistant.raw - the raw conic equidistant projection.
d3.geo.conicEqualArea.raw the raw conic equal-area (a.k.a. Albers) projection.
d3.geo.equirectangular.raw - the raw equirectangular (plate carrée) projection.
d3.geo.gnomonic.raw - the raw gnomonic projection.
d3.geo.mercator.raw - the raw Mercator projection.
d3.geo.orthographic.raw - the raw azimuthal orthographic projection.
d3.geo.stereographic.raw - the raw azimuthal stereographic projection.
d3.geo.transverseMercator.raw - the raw transverse Mercator projection.
Streams
d3.geo.stream - convert a GeoJSON object to a geometry stream.
stream.point - indicate an x, y (and optionally z) coordinate.
stream.lineStart - indicate the start of a line or ring.
stream.lineEnd - indicate the end of a line or ring.
stream.polygonStart - indicate the start of a polygon.
stream.polygonEnd - indicate the end of a polygon.
stream.sphere - indicate a sphere.
d3.geo.transform - transform streaming geometries.
transform.stream - wraps a given stream.
d3.geo.clipExtent - a stream transform that clips geometries to a given axis-aligned rectangle.
clipExtent.extent - sets the clip extent.
d3.geom (Geometry)
Voronoi
d3.geom.voronoi - create a Voronoi layout with default accessors.
voronoi - compute the Voronoi tessellation for the specified points.
voronoi.x - get or set the x-coordinate accessor for each point.
voronoi.y - get or set the y-coordinate accessor for each point.
voronoi.clipExent - get or set the clip extent for the tesselation.
voronoi.links - compute the Delaunay mesh as a network of links.
voronoi.triangles - compute the Delaunay mesh as a triangular tessellation.
Quadtree
d3.geom.quadtree - constructs a quadtree for an array of points.
quadtree.add - add a point to the quadtree.
quadtree.visit - recursively visit nodes in the quadtree.
Polygon
d3.geom.polygon - create a polygon from the specified array of points.
polygon.area - compute the counterclockwise area of this polygon.
polygon.centroid - compute the area centroid of this polygon.
polygon.clip - clip the specified polygon to this polygon.
Hull
d3.geom.hull - create a convex hull layout with default accessors.
hull - compute the convex hull for the given array of points.
hull.x - get or set the x-coordinate accessor.
hull.y - get or set the y-coordinate accessor.
d3.behavior (Behaviors)
Drag
d3.behavior.drag
drag.origin
drag.on
縮放 Zoom
d3.behavior.zoom - 創建一個縮放行為.
zoom - 對指定元素應用縮放.
zoom.scale - the current scale factor.
zoom.translate - the current translate offset.
zoom.scaleExtent - optional limits on the scale factor.
zoom.center - an optional focal point for mousewheel zooming.
zoom.size - the dimensions of the viewport.
zoom.x - an optional scale whose domain is bound to the x extent of the viewport.
zoom.y - an optional scale whose domain is bound to the y extent of the viewport.
zoom.on - listeners for when the scale or translate changes.
zoom.event - dispatch zoom events after setting the scale or translate.

D3js-API介紹【中】