D3 庫所提供的所有 API 都在 d3 命名空間下。d3 庫使用語義版本命名法(semantic versioning)。 你可以用 d3.version
查看當前的版本信息。
d3 (核心部分)
選擇集
過渡效果
- 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執行某個函數.
Math
載入外部資源(Loading External Resources)
字符串格式化(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”);
顏色
命名空間
內部方法(Internals)
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.svg (SVG)
Shapes
坐標軸(Axes)
Controls
d3.time (Time)
時間格式轉換(Time Formatting)
時間變換(Time Scales)
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)
集群(Cluster)
力學(Force)
層級布局(Hierarchy)
直方圖(Histogram)
層包(Pack)
分區(Partition)
餅圖(Pie)
堆疊圖(Stack)
樹(Tree)
矩陣樹(Treemap)
d3.geo (Geography)
Paths
Projections
Streams
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
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
縮放 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.