欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時間:2015年01月20日 14:14:06   投稿:junjie  
這篇文章主要介紹了JavaScript可視化圖表庫D3.js API中文參考,本文對常用的API給出一中文翻譯,需要的朋友可以參考下

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

d3 (核心部分)

選擇集

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

過渡效果

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

數(shù)據(jù)操作(Working with Arrays)

  • d3.ascending - 升序排序函數(shù).
  • d3.descending - 降序排序函數(shù).
  • d3.min - 獲取數(shù)組中的最小值.
  • d3.max - 獲取數(shù)組中的最大值.
  • d3.extent - 獲取數(shù)組的范圍(最小值和最大值).
  • d3.sum - 獲取數(shù)組中數(shù)字之和.
  • d3.mean -獲取數(shù)組中數(shù)字的算術平均值.
  • d3.median - 獲取數(shù)組中數(shù)字的中位數(shù) (相當于 0.5-quantile的值).
  • d3.quantile - 獲取排好序的數(shù)組的一個分位數(shù)(quantile).
  • d3.bisect - 通過二分法獲取某個數(shù)在排好序的數(shù)組中的插入位置(同d3.bisectRight).
  • d3.bisectRight - 獲取某個數(shù)在排好序的數(shù)組中的插入位置(相等的值歸入右邊).
  • d3.bisectLeft - 獲取某個數(shù)在排好序的數(shù)組中的插入位置(相等的值歸入左邊).
  • d3.bisector - 自定義一個二分函數(shù).
  • d3.shuffle - 洗牌,隨機排列數(shù)組中的元素.
  • d3.permute - 以指定順序排列數(shù)組中的元素.
  • d3.zip - 將多個數(shù)組合并成一個數(shù)組的數(shù)組,新數(shù)組的的第i個元素是原來各個數(shù)組中第i個元素組成的數(shù)組.
  • d3.transpose - 矩陣轉置,通過d3.zip實現(xiàn).
  • d3.pairs - 返回臨近元素對的數(shù)組,d3.pairs([1, 2, 3, 4]); // returns [ [1, 2], [2, 3], [3, 4] ].
  • d3.keys - 返回關聯(lián)數(shù)組(哈希表、json、object對象)的key組成的數(shù)組.
  • d3.values - 返回關聯(lián)數(shù)組的value組成的數(shù)組.
  • d3.entries - 返回關聯(lián)數(shù)組的key-value實體組成的數(shù)組, d3.entries({ foo: 42 }); // returns [{key: "foo", value: 42}].
  • d3.merge - 將多個數(shù)組連成一個,類似于原生方法concat. d3.merge([ [1], [2, 3] ]); // returns [1, 2, 3].
  • d3.range - 獲得一個數(shù)列. d3.range([start, ]stop[, step])
  • d3.nest - 獲得一個nest對象,將數(shù)組組織成層級結構. 示例:http://bl.ocks.org/phoebebright/raw/3176159/
  • nest.key - 為nest層級結構增加一個層級.
  • nest.sortKeys - 將當前的nest層級結構按key排序.
  • nest.sortValues - 將葉nest層級按value排序.
  • nest.rollup - 設置修改葉節(jié)點值的函數(shù).
  • nest.map - 執(zhí)行nest操作, 返回一個關聯(lián)數(shù)組(json).
  • nest.entries - 執(zhí)行nest操作, 返回一個key-value數(shù)組. 如果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組成的數(shù)組.
  • map.values - 返回map中所有value組成的數(shù)組.
  • map.entries - 返回map中所有entry(key-value鍵值對)組成的數(shù)組.類似于{ foo: 42 }轉化成[{key: "foo", value: 42}]
  • map.forEach - 對map中每一個entry執(zhí)行某個函數(shù).
  • 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中的值組成的數(shù)組.set中的value是去重過的.
  • set.forEach - 對set中每一個value執(zhí)行某個函數(shù).

Math

  • d3.random.normal - 利用正態(tài)分布產生一個隨機數(shù).
  • d3.random.logNormal - 利用對數(shù)正態(tài)分布產生一個隨機數(shù).
  • d3.random.irwinHall - 利用Irwin–Hall分布(簡單可行并且容易編程的正態(tài)分布實現(xiàn)方法)產生一個隨機數(shù).
  • d3.transform - 將svg的tranform格式轉化為標準的2D轉換矩陣字符串格式.

載入外部資源(Loading External Resources)

  • d3.xhr - 發(fā)起XMLHttpRequest請求獲取資源。
  • xhr.header - 設置 request header。
  • xhr.mimeType - 設置 Accept request header,并重寫 response MIME type。
  • xhr.response - 設置response返回值轉化函數(shù)。如 function(request) { return JSON.parse(request.responseText); }
  • xhr.get - 發(fā)起GET請求。
  • xhr.post - 發(fā)起POST請求。
  • xhr.send - 以指定的方法和數(shù)據(jù)發(fā)起請求。
  • xhr.abort - 終止當前請求。
  • xhr.on - 為請求添加”beforesend”, “progress”, “l(fā)oad” 或 “error” 等事件監(jiān)聽器。
  • 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 - 將數(shù)字轉化成指定格式的字符串。轉化的格式非常豐富,且非常智能。
  • d3.formatPrefix - 以指定的值和精度獲得一個[SI prefix]對象。這個函數(shù)可用來自動判斷數(shù)據(jù)的量級, 如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 - 設置某個數(shù)按小數(shù)點后多少位取整。與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的數(shù)組,object的key由第一行決定。如: [{"Year": "1997", "Length": "2.34"}, {"Year": "2000", "Length": "2.38"}]
  • d3.csv.parseRows - 將CSV文件字符串轉化成數(shù)組的數(shù)組。如: [ ["Year", "Length"],["1997", "2.34"],["2000", "2.38"] ]
  • d3.csv.format - 將object的數(shù)組轉化成CSV文件字符串,是d3.csv.parse的逆操作。
  • d3.csv.formatRows - 將數(shù)組的數(shù)組轉化成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 - 創(chuàng)建一個類似于d3.csv的文件處理對象,可以自定義分隔符和mime type。如:var dsv = d3.dsv(“|”, “text/plain”);

顏色

  • d3.rgb - 指定一種顏色,創(chuàng)建一個RGB顏色對象。支持多種顏色格式的輸入。
  • rgb.brighter - 增強顏色的亮度,變化幅度由參數(shù)決定。
  • rgb.darker - 減弱顏色的亮度,變化幅度由參數(shù)決定。
  • rgb.hsl - 將RGB顏色對象轉化成HSL顏色對象。
  • rgb.toString - RGB顏色轉化為字符串格式。
  • d3.hsl - 創(chuàng)建一個HSL顏色對象。支持多種顏色格式的輸入。
  • hsl.brighter - 增強顏色的亮度,變化幅度由參數(shù)決定。
  • hsl.darker - 減弱顏色的亮度,變化幅度由參數(shù)決定。
  • hsl.rgb - 將HSL顏色對象轉化成RGB顏色對象。
  • hsl.toString - HSL顏色轉化為字符串格式。
  • d3.lab - 創(chuàng)建一個Lab顏色對象。支持多種顏色格式的輸入。
  • lab.brighter - 增強顏色的亮度,變化幅度由參數(shù)決定。
  • lab.darker - 減弱顏色的亮度,變化幅度由參數(shù)決定。
  • lab.rgb - 將Lab顏色對象轉化成RGB顏色對象。
  • lab.toString - Lab顏色轉化為字符串格式。
  • d3.hcl - 創(chuàng)建一個HCL顏色對象。支持多種顏色格式的輸入。
  • hcl.brighter - 增強顏色的亮度,變化幅度由參數(shù)決定。
  • hcl.darker - 減弱顏色的亮度,變化幅度由參數(shù)決定。
  • hcl.rgb - 將HCL顏色對象轉化成RGB顏色對象。
  • hcl.toString - HCL顏色轉化為字符串格式。

命名空間

  • d3.ns.prefix - 獲取或擴展已知的XML命名空間。
  • d3.ns.qualify - 驗證命名空間前綴是否存在, 如”xlink:href”中xlink是已知的命名空間。

內部方法(Internals)

  • d3.functor - 函數(shù)化。將非函數(shù)變量轉化為只返回該變量值的函數(shù)。輸入函數(shù),則返回原函數(shù);輸入值,則返回一個函數(shù),該函數(shù)只返回原值。
  • d3.rebind - 將一個對象的方法綁定到另一個對象上。
  • d3.dispatch - 創(chuàng)建一個定制的事件。
  • dispatch.on - 添加或移除一個事件監(jiān)聽器。對一個事件可添加多個監(jiān)聽器。
  • dispatch.type - 觸發(fā)事件。其中‘type'為要觸發(fā)的事件的名稱。

d3.scale(Scales)

定量變換(Quantitative)

  • d3.scale.linear - 創(chuàng)建一個線性定量變換。(建議參考源碼以深入理解各種變換。)
  • linear - 輸入一個定義域的值,返回一個值域的值。
  • linear.invert - 反變換,輸入值域值返回定義域值。
  • linear.domain - get或set定義域。
  • linear.range - get或set值域。
  • linear.rangeRound - 設置值域,并對結果取整。
  • linear.interpolate - get或set變換的插值函數(shù),如將默認的線性插值函數(shù)替換成取整的線性插值函數(shù)d3_interpolateRound。
  • linear.clamp - 設置值域是否閉合,默認不閉合。當值域閉合時,如果插值結果在值域之外,會取值域的邊界值。如值域為[1, 2],插值函數(shù)的計算結果為3,如果不閉合,最終結果為3;如果閉合,最終結果為2。
  • linear.nice - 擴展定義域范圍使定義域更規(guī)整。如[0.20147987687960267, 0.996679553296417] 變成 [0.2, 1]。
  • linear.ticks - 從定義域中取出有代表性的值。通常用于坐標軸刻度的選取。
  • linear.tickFormat - 獲取格式轉化函數(shù),通常用于坐標軸刻度的格式轉化。如: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 - 創(chuàng)建一個求平方根的定量轉換。
  • d3.scale.pow - 創(chuàng)建一個指數(shù)變換。(可參考linear對應函數(shù)的注釋)
  • pow - 輸入一個定義域的值,返回一個值域的值。
  • pow.invert - 反變換,輸入值域值返回定義域值。
  • pow.domain - get或set定義域。
  • pow.range - get或set值域。
  • pow.rangeRound - 設置值域,并對結果取整。
  • pow.interpolate - get或set變換的插值函數(shù)。
  • pow.clamp - 設置值域是否閉合,默認不閉合。
  • pow.nice - 擴展定義域范圍使定義域更規(guī)整。
  • pow.ticks - 從定義域中取出有代表性的值。通常用于坐標軸刻度的選取。
  • pow.tickFormat - 獲取格式轉化函數(shù),通常用于坐標軸刻度的格式轉化。
  • pow.exponent - get或set指數(shù)的冪次。默認為1次冪。
  • pow.copy - 從已有的變換中復制出一個變換。
  • d3.scale.log - 創(chuàng)建一個對數(shù)變換。(可參考linear對應函數(shù)的注釋)
  • log - 輸入一個定義域的值,返回一個值域的值。
  • log.invert - 反變換,輸入值域值返回定義域值。
  • log.domain - get或set定義域。
  • log.range - get或set值域。
  • log.rangeRound - 設置值域,并對結果取整。
  • log.interpolate - get或set變換的插值函數(shù)。
  • log.clamp - 設置值域是否閉合,默認不閉合。
  • log.nice - 擴展定義域范圍使定義域更規(guī)整。
  • log.ticks - 從定義域中取出有代表性的值。通常用于坐標軸刻度的選取。
  • log.tickFormat - 獲取格式轉化函數(shù),通常用于坐標軸刻度的格式轉化。
  • log.copy - 從已有的變換中復制出一個變換。
  • d3.scale.quantize - 創(chuàng)建一個quantize線性變換,定義域為一個數(shù)值區(qū)間,值域為幾個離散值。
  • quantize - 輸入數(shù)值,返回離散值。如: 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(閾值)線性變換。定義域為分隔值數(shù)值序列,值域為離散值。它與quantize的區(qū)別是quantize指定的值域為一個區(qū)間,然后均分這個區(qū)間為多個小區(qū)間,以對應各離散值。threshold則指定各小區(qū)間的邊界分隔值。示例: 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 - 輸入數(shù)值,返回離散值。
  • threshold.invertExtent - 輸入離散值,返回數(shù)值。
  • threshold.domain - get或set變換的定義域。
  • threshold.range - get或set變換的值域。
  • threshold.copy - 從已有的變換中復制出一個變換。
  • d3.scale.quantile - 構建一個quantile線性變換。使用方法與quantize完全類似,區(qū)別是quantile根據(jù)中位數(shù)來分隔區(qū)間,quantize根據(jù)算數(shù)平均值來分隔區(qū)間。example
  • quantile - 輸入數(shù)值,返回離散值。
  • quantile.invertExtent - 輸入離散值,返回數(shù)值。
  • 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線性變換函數(shù)。返回輸入值。
  • identity.invert - 和identity函數(shù)相同,返回輸入值。
  • identity.domain - get或set變換的定義域。
  • identity.range - get或set變換的值域。
  • identity.ticks - 從定義域中取出有代表性的值。通常用于坐標軸刻度的選取。
  • identity.tickFormat - 獲取格式轉化函數(shù),通常用于坐標軸刻度的格式轉化。
  • identity.copy - 從已有的變換中復制出一個變換。

序數(shù)變換(Ordinal)

  • d3.scale.ordinal - 構建一個ordinal變換對象。ordinal變換的輸入定義域和輸出值域都是離散的。而quantitative變換的輸入定義域是連續(xù)的,這是兩者最大的不同。
  • ordinal - 輸入一個離散值,返回一個離散值。不在當前定義域中的輸入值會自動加入定義域。
  • ordinal.domain - get或set變換的定義域。
  • ordinal.range - get或set變換的值域。
  • ordinal.rangePoints - 用幾個離散點來分割一個連續(xù)的區(qū)間。詳情請看鏈接中的圖例。
  • ordinal.rangeBands - 用幾個離散區(qū)間來分割一個連續(xù)的區(qū)間。詳情請看鏈接中的圖例。
  • ordinal.rangeRoundBands - 用幾個離散區(qū)間來分割一個連續(xù)的區(qū)間,區(qū)間邊界和寬度會取整。詳情請看鏈接中的圖例。
  • ordinal.rangeBand - 獲取離散區(qū)間的寬度。
  • 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 - 創(chuàng)建一個線段生成器.
  • line - 在折線圖里生成一段折線.
  • line.x - 設置或獲取x軸訪問器.
  • line.y - 設置或獲取y軸訪問器
  • line.interpolate - 設置或獲取插值模式.
  • line.tension - 獲取或設置曲線張力訪問器(cardinal spline tension).
  • line.defined - 定義線條在某一點是否存在.
  • d3.svg.line.radial - 創(chuàng)建輻射線生成器.
  • line - 生成分段的線性曲線,用于緯度線/雷達線圖表.
  • line.radius - 獲取或設置radius訪問器.
  • line.angle - 獲取或設置angle訪問器.
  • line.defined - 設置或獲取線條定義存取器.
  • d3.svg.area - 創(chuàng)建一個新的區(qū)域生成器.
  • area - 生成一個線性的區(qū)域,用于區(qū)域圖表.
  • 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 - 判斷獲取或定義區(qū)域定義存取器.
  • d3.svg.area.radial - 創(chuàng)建新的區(qū)域生成器.
  • area - 生成分段的線性區(qū)域,用于緯度/雷達圖表.
  • area.radius - 獲取或設置radius訪問器.
  • area.innerRadius - 獲取或設置內部的radius(基線)訪問器.
  • area.outerRadius - 獲取或設置外部的radius(背線)訪問器.
  • area.angle - 獲取或設置angle訪問器.
  • area.startAngle - 獲取或設置內部的angle(基線)訪問器.
  • area.endAngle - 獲取或設置外部的angle(背線)訪問器.
  • area.defined - 判斷獲取或定義區(qū)域定義存取器.
  • d3.svg.arc - 創(chuàng)建弧度生成器.
  • arc - 生成一個線性弧度,用于餅圖或甜甜圈圖.
  • arc.innerRadius - 獲取或設置內部的半徑訪問器.
  • arc.outerRadius - 獲取或設置外部的半徑訪問器.
  • arc.startAngle - 獲取或設置起始角度訪問器.
  • arc.endAngle - 獲取或設置結束角度訪問器.
  • arc.centroid - 計算弧的重心點.
  • d3.svg.symbol - 創(chuàng)建符號生成器.
  • symbol - 生成指定的符號,用于散列圖.
  • symbol.type - 獲取或設置符號類型訪問器.
  • symbol.size - 獲取或設置符號尺寸(in square pixels) 訪問器.
  • d3.svg.symbolTypes - 被支持的符號類型數(shù)組.
  • d3.svg.chord - 創(chuàng)建新的弦生成器.
  • chord - 生成一個二次貝塞爾曲線連接兩個弧, 用于弦圖.
  • chord.radius - 獲取或設置弧半徑訪問器.
  • chord.startAngle - 獲取或設置弧起始角度訪問器.
  • chord.endAngle - 獲取或設置弧結束角度訪問器.
  • chord.source - 獲取或設置源弧度訪問器.
  • chord.target - 獲取或設置目標弧度訪問器.
  • d3.svg.diagonal - 創(chuàng)建新的斜線生成器.
  • diagonal - 生成一個二維貝塞爾連接器, 用于節(jié)點連接圖.
  • diagonal.source - 獲取或設置源點訪問器.
  • diagonal.target - 獲取或設置目標點訪問器.
  • diagonal.projection - 獲取或設置一個可選的點變換器.
  • d3.svg.diagonal.radial - 創(chuàng)建一個新的斜線生成器.
  • diagonal - 創(chuàng)建一個二維貝塞爾連接器,用于節(jié)點連接圖.

坐標軸(Axes)

  • d3.svg.axis - 創(chuàng)建一個axis生成器。
  • axis - 正式在頁面中生成axis。
  • axis.scale - get或set坐標軸的scale尺度變換,該尺度變換設定了數(shù)值和像素位置的轉換規(guī)則。
  • 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 - 點擊拖拽選擇一個二維區(qū)域。
  • brush - 在頁面中某個區(qū)域中正式綁定一個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的事件監(jiān)聽器??杀O(jiān)聽3種事件:brushstart, brush, brushend。
  • brush.event - 通過程序觸發(fā)監(jiān)聽事件,在通過程序設置extent后使用。

d3.time (Time)

時間格式轉換(Time Formatting)

  • d3.time.format - 創(chuàng)建基于某種時間格式的本地時間格式轉換器。
  • format - 將一個date對象轉換成特定時間格式的字符串。
  • format.parse - 將特定時間格式的字符串轉換成date對象。
  • d3.time.format.utc - 創(chuàng)建基于某種時間格式的世界標準時間(UTC)格式轉換器。
  • d3.time.format.iso - 創(chuàng)建基于某種時間格式的ISO世界標準時間(ISO 8601 UTC)格式轉換器。

時間變換(Time Scales)

  • d3.time.scale - 創(chuàng)建一個線性時間變換,定義域為數(shù)值區(qū)間,值域為時間區(qū)間。常用于時間坐標軸的創(chuàng)建。詳情可參考d3.scale.linear。
  • scale - 輸入為一個數(shù)值,返回為一個時間。
  • scale.invert - 反變換,輸入時間返回數(shù)值。
  • scale.domain - get或set變換的定義域。
  • scale.nice - 擴展定義域范圍使定義域更規(guī)整。
  • scale.range - get或set變換的值域。
  • scale.rangeRound - 設置值域,并對結果取整。
  • scale.interpolate - get或set變換的插值函數(shù),如將默認的線性插值函數(shù)替換成指數(shù)插值函數(shù)。
  • scale.clamp - 設置值域是否閉合,默認不閉合。當值域閉合時,如果插值結果在值域之外,會取值域的邊界值。詳情參考linear.clamp。
  • scale.ticks - 從定義域中取出有代表性的值。通常用于坐標軸刻度的選取。
  • scale.tickFormat - 獲取格式轉化函數(shù),通常用于坐標軸刻度的格式轉化。
  • scale.copy - 從已有的時間變換中復制出一個變換。

Time Intervals

構圖(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 - 設置或者獲取弦圖實例對應的矩陣數(shù)據(jù)
  • chord.padding - 設置或獲取弦圖各段圓弧之間的間隔角度
  • chord.sortGroups - 設置或獲取矩陣分組的排序函數(shù)
  • chord.sortSubgroups - 設置或獲取矩陣二級分組的排序函數(shù)
  • chord.sortChords - 設置或獲取弦圖在z序上的排序函數(shù)(決定哪一組顯示在最上層)
  • chord.chords - 該函數(shù)會將參數(shù)處理成對 chord 更友好的格式并返回, 若沒有提供參數(shù), 會調用matrix()來獲取數(shù)據(jù)
  • chord.groups - 該函數(shù)參數(shù)處理成更易于理解的分組信息, 若沒有提供參數(shù), 會調用matrix()來獲取數(shù)據(jù)

集群(Cluster)

  • d3.layout.cluster - 用默認設置生成一個集群布局對象.
  • cluster.sort - 獲取或設置一個函數(shù), 用來給兄弟節(jié)點(同一父結點的子結點)的排序.
  • cluster.children - 獲取或設置子結點的訪問器.
  • cluster.nodes - 計算并返回指定結點的子結點在集群中的信息(坐標,深度等).
  • cluster.links - 指定一個子結點數(shù)組(通常是nodes函數(shù)返回值), 計算它們與父結點的連接信息.
  • cluster.separation - 獲取或設置相鄰結點間的間隔(不僅限于兄弟結點).
  • cluster.size - 獲取或設置布局的 的大小.
  • cluster.nodeSize - 為結點指定大小.

力學(Force)

  • d3.layout.force -節(jié)點(node)基于物理模擬的位置連接。
  • force.on - 監(jiān)聽布局位置的變化。(僅支持”start”,”step”,”end”三種事件)
  • force.nodes - 獲得或設置布局中的節(jié)點(node)陣列組。
  • force.links - 獲得或設置布局中節(jié)點間的連接(Link)陣列組。.
  • force.size - 獲取或設置布局的 的大小.
  • force.linkDistance - 獲取或設置節(jié)點間的連接線距離.
  • force.linkStrength - 獲取或設置節(jié)點間的連接強度.
  • force.friction - 獲取或設置摩擦系數(shù).
  • force.charge - 獲取或設置節(jié)點的電荷數(shù).(電荷數(shù)決定結點是互相排斥還是吸引)
  • force.gravity - 獲取或設置節(jié)點的引力強度.
  • force.theta - 獲取或設置電荷間互相作用的強度.
  • force.start - 開啟或恢復結點間的位置影響.
  • force.resume - 設置冷卻系數(shù)為0.1,并重新調用start()函數(shù).
  • force.stop - 立刻終止結點間的位置影響.(等同于將冷卻系數(shù)設置為0)
  • force.alpha - 獲取或設置布局的冷卻系數(shù).(冷卻系數(shù)為0時,節(jié)點間不再互相影響)
  • force.tick - 讓布局運行到下一步.
  • force.drag - 獲取當前布局的拖拽對象實例以便進一步綁定處理函數(shù).

層級布局(Hierarchy)

直方圖(Histogram)

  • d3.layout.histogram - 構建一個默認直方圖(用來表示一組離散數(shù)字的分布,橫軸表示區(qū)間,縱軸表示區(qū)間內樣本數(shù)量或樣本百分比).
  • histogram.value - 獲取或設置值訪問器.
  • histogram.range - 獲取或設置合法值范圍.
  • histogram.bins - 指定如何將數(shù)據(jù)分組到不同的區(qū)間(bin)里, 返回一個構造函數(shù) .
  • histogram - 根據(jù)已設置的區(qū)間將數(shù)據(jù)分組,返回已分組的二維數(shù)組(compute the distribution of data using quantized bins).
  • histogram.frequency - 設置直方圖Y軸值是區(qū)間內數(shù)據(jù)的總量還是百分比(compute the distribution as counts or probabilities).

層包(Pack)

  • d3.layout.pack - 用遞歸的圓環(huán)表現(xiàn)一個多層級布局.
  • pack.sort - 獲取或設置一個函數(shù), 用來給兄弟節(jié)點(同一父結點的子結點)排序.
  • pack.children - 獲取或設置子結點的訪問器.
  • pack.nodes - 計算并返回指定結點的子結點信息.
  • pack.links - 指定一個子結點數(shù)組(通常是nodes函數(shù)返回值), 計算它們與父結點的連接信息.
  • pack.value - 獲取或設置一個函數(shù), 用來計算圓環(huán)的大小(近似值).
  • pack.size - 設置整個布局畫布的 and .
  • pack.radius - 如果不想結點半徑與結點的值相同, 可以傳入一個函數(shù)用來計算結點半徑.
  • pack.padding - 指定相鄰結點之點的間距(近似值).

分區(qū)(Partition)

  • d3.layout.partition - 將一棵樹遞歸的分區(qū).
  • partition.sort - 獲取或設置一個函數(shù), 用來給兄弟節(jié)點(同一父結點的子結點)排序.
  • partition.children - 獲取或設置子結點的訪問器.
  • partition.nodes - 計算并返回指定結點的子結點信息.
  • partition.links - 指定一個子結點數(shù)組(通常是nodes函數(shù)返回值), 計算它們與父結點的連接信息.
  • partition.value - 設置一個函數(shù)來來計算分區(qū)的值.
  • partition.size - 設置整個布局畫布的 and .

餅圖(Pie)

  • d3.layout.pie - 構建一個默認的餅圖.
  • pie - 該函數(shù)將傳入的原始參數(shù)轉換成可用于餅圖或者環(huán)形圖的數(shù)據(jù)結構.
  • 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 - 設置或獲取用來儲存基線的輸出函數(shù).

樹(Tree)

  • d3.layout.tree - position a tree of nodes tidily.
  • tree.sort - 設置或獲取一個函數(shù), 用來給兄弟節(jié)點(同一父結點的子結點)排序.
  • tree.children - 設置或獲取子結點的訪問器.
  • tree.nodes - 計算并返回指定結點的子結點信息.
  • tree.links - 指定一個子結點數(shù)組(通常是nodes函數(shù)返回值), 計算它們與父結點的連接信息.
  • tree.separation - 設置或獲取相隔結點之間的間隔計算函數(shù).
  • tree.size - 指定整個布局的寬和高.
  • tree.nodeSize - 給全部結點指定一個固定的大小(會導致tree.size失效).

矩陣樹(Treemap)

  • d3.layout.treemap - 返回一個矩陣樹對象(用矩陣來展示一顆樹).
  • treemap.sort - 設置或獲取一個函數(shù), 用來給兄弟節(jié)點(同一父結點的子結點)排序.
  • treemap.children - 設置或獲取子結點的訪問器.
  • treemap.nodes - 計算并返回指定結點的子結點信息.
  • treemap.links - 指定一個子結點數(shù)組(通常是nodes函數(shù)返回值), 計算它們與父結點的連接信息.
  • treemap.value - 設置或獲取一個用來計算單元格大小的值訪問器.
  • treemap.size - 指定整個布局的寬和高.
  • treemap.padding - 指定父結點和子結點的間距.
  • treemap.round - 禁用或啟用邊界補償.
  • treemap.sticky - 讓布局更”粘”以保證在更新數(shù)據(jù)時有平滑的動畫效果.
  • treemap.mode - 更改矩陣樹的布局算法.

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 - 創(chuàng)建一個縮放行為.
  • 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.

相關文章

  • requireJS使用指南

    requireJS使用指南

    如今最常用的JavaScript庫之一是RequireJS。最近我參與的每個項目,都用到了RequireJS,或者是我向它們推薦了增加RequireJS。在這篇文章中,我將描述RequireJS是什么,以及它的一些基礎場景。 
    2016-04-04
  • FastAdmin表單驗證data-rule插件—Nice-validator的使用方法

    FastAdmin表單驗證data-rule插件—Nice-validator的使用方法

    FastAdmin的表單驗證data-rule非常方便,也很炫酷,采用的Nice-validator是一款非常強大的表單驗證插件,通過簡單在元素上配置規(guī)則,即可達到驗證的效果,怎么使用Nice-validator插件呢
    2023-09-09
  • 前端輕量級MVC框架CanJS詳解

    前端輕量級MVC框架CanJS詳解

    你可能聽說了這個新MVC框架: CanJS。還有什么比用它來創(chuàng)建一個聯(lián)系人Web App更能深入了解它的辦法呢?當看完這篇教程,你將全面了解用它的什么工具來創(chuàng)建你自己的Web App。
    2014-09-09
  • Underscore.js常用方法總結

    Underscore.js常用方法總結

    這篇文章主要介紹了Underscore.js常用方法總結,本文講解了Underscore.js概述、在node.js下安裝、與集合有關的方法、與對象有關的方法、與函數(shù)相關的方法等內容,需要的朋友可以參考下
    2015-02-02
  • TypeScript?中?as?const使用介紹

    TypeScript?中?as?const使用介紹

    這篇文章主要為大家介紹了TypeScript?中?as?const使用介紹,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2022-12-12
  • TypeScript 高級數(shù)據(jù)類型實例詳解

    TypeScript 高級數(shù)據(jù)類型實例詳解

    這篇文章主要為大家介紹了TypeScript 高級數(shù)據(jù)類型實例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2023-01-01
  • 基于Javascript實現(xiàn)頁面商品個數(shù)增減功能

    基于Javascript實現(xiàn)頁面商品個數(shù)增減功能

    本文給大家介紹基于Javascript實現(xiàn)頁面商品個數(shù)增減功能,通過點擊數(shù)量增減個數(shù),代碼分為前端頁面,后臺返回代碼,代碼簡單易懂,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友參考下吧
    2019-07-07
  • TypeScript學習輕松玩轉類型操作

    TypeScript學習輕松玩轉類型操作

    這篇文章主要為大家介紹了TypeScript學習輕松玩轉類型操作,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2023-07-07
  • rollup?cli開發(fā)全面系統(tǒng)性rollup源碼分析

    rollup?cli開發(fā)全面系統(tǒng)性rollup源碼分析

    這篇文章主要為大家介紹了rollup?cli開發(fā)全網系統(tǒng)性rollup源碼分析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2023-01-01
  • TypeScript中的遞歸類型示例解析

    TypeScript中的遞歸類型示例解析

    這篇文章主要為大家介紹了TypeScript中的遞歸類型示例解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2023-04-04

最新評論