国产探花免费观看_亚洲丰满少妇自慰呻吟_97日韩有码在线_资源在线日韩欧美_一区二区精品毛片,辰东完美世界有声小说,欢乐颂第一季,yy玄幻小说排行榜完本

首頁 > 編程 > JavaScript > 正文

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

2019-11-20 13:21:19
字體:
供稿:網(wǎng)友

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

d3 (核心部分)

選擇集

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

過渡效果

  • d3.transition - 開始一個(gè)動畫過渡。簡單教程
  • transition.delay - 指定每個(gè)元素過渡的延遲時(shí)間(單位:毫秒ms)。
  • transition.duration - 指定每個(gè)元素過渡的持續(xù)時(shí)間(單位:毫秒ms)。
  • transition.ease - 指定過渡的緩沖函數(shù)。
  • transition.attr - 平滑過渡到新的attr屬性值(起始屬性值為當(dāng)前屬性)。
  • transition.attrTween - 在不同attr屬性值之間平滑過渡(起始屬性值可在過渡函數(shù)中設(shè)置,甚至整個(gè)過渡函數(shù)都可以自定義)。
  • transition.style - 平滑過渡到新的style屬性值。
  • transition.styleTween - 在不同style屬性值之間平滑過渡。
  • transition.text - 在過渡開始時(shí)設(shè)置文本內(nèi)容。
  • transition.tween - 使某個(gè)屬性過渡到一個(gè)新的屬性值,該屬性可以是非attr或非style屬性,比如text。
  • transition.select - 選擇每個(gè)當(dāng)前元素的某個(gè)子元素進(jìn)行過渡。
  • transition.selectAll - 選擇每個(gè)當(dāng)前元素的多個(gè)子元素進(jìn)行過渡。
  • transition.filter - 通過數(shù)據(jù)篩選出當(dāng)前元素中的部分元素進(jìn)行過渡。
  • transition.transition - 當(dāng)前過渡結(jié)束后開始新的過渡。
  • transition.remove - 過渡結(jié)束后移除當(dāng)前元素。
  • transition.empty - 如果過渡為空就返回true。如果當(dāng)前元素中沒有非null元素,則此過渡為空。
  • transition.node - 返回過渡中的第一個(gè)元素。
  • transition.size - 返回過渡中當(dāng)前元素的數(shù)量。
  • transition.each - 遍歷每個(gè)元素執(zhí)行操作。不指定觸發(fā)類型時(shí),立即執(zhí)行操作。當(dāng)指定觸發(fā)類型為'start'或'end'時(shí),會在過渡開始或結(jié)束時(shí)執(zhí)行操作。
  • transition.call - 以當(dāng)前過渡為this執(zhí)行某個(gè)函數(shù)。
  • d3.ease - 定制過渡的緩沖函數(shù)。
  • ease - 緩沖函數(shù)。緩沖函數(shù)可讓動畫效果更自然,比如elastic緩沖函數(shù)可用以模擬彈性物體的運(yùn)動。是一種插值函數(shù)的特例。
  • d3.timer - 開始一個(gè)定制的動畫計(jì)時(shí)。功能類似于setTimeout,但內(nèi)部用requestAnimationFrame實(shí)現(xiàn),更高效。
  • d3.timer.flush - 立刻執(zhí)行當(dāng)前沒有延遲的計(jì)時(shí)。可用于處理閃屏問題。
  • d3.interpolate - 生成一個(gè)插值函數(shù),在兩個(gè)參數(shù)間插值。差值函數(shù)的類型會根據(jù)輸入?yún)?shù)的類型(數(shù)字、字符串、顏色等)而自動選擇。
  • interpolate - 插值函數(shù)。輸入?yún)?shù)在[0, 1]之間。
  • d3.interpolateNumber - 在兩個(gè)數(shù)字間插值。
  • d3.interpolateRound - 在兩個(gè)數(shù)字間插值,返回值會四舍五入取整。
  • d3.interpolateString - 在兩個(gè)字符串間插值。解析字符串中的數(shù)字,對應(yīng)的數(shù)字會插值。
  • d3.interpolateRgb - 在兩個(gè)RGB顏色間插值。
  • d3.interpolateHsl - 在兩個(gè)HSL顏色間插值。
  • d3.interpolateLab - 在兩個(gè)L*a*b*顏色間插值。
  • d3.interpolateHcl - 在兩個(gè)HCL顏色間插值。
  • d3.interpolateArray - 在兩個(gè)數(shù)列間插值。d3.interpolateArray( [0, 1], [1, 10, 100] )(0.5); // returns [0.5, 5.5, 100]
  • d3.interpolateObject - 在兩個(gè)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 - 在兩個(gè)2D仿射變換間插值。
  • d3.interpolateZoom - 在兩個(gè)點(diǎn)之間平滑地縮放平移。示例
  • d3.interpolators - 添加一個(gè)自定義的插值函數(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ù)字的算術(shù)平均值.
  • d3.median - 獲取數(shù)組中數(shù)字的中位數(shù) (相當(dāng)于 0.5-quantile的值).
  • d3.quantile - 獲取排好序的數(shù)組的一個(gè)分位數(shù)(quantile).
  • d3.bisect - 通過二分法獲取某個(gè)數(shù)在排好序的數(shù)組中的插入位置(同d3.bisectRight).
  • d3.bisectRight - 獲取某個(gè)數(shù)在排好序的數(shù)組中的插入位置(相等的值歸入右邊).
  • d3.bisectLeft - 獲取某個(gè)數(shù)在排好序的數(shù)組中的插入位置(相等的值歸入左邊).
  • d3.bisector - 自定義一個(gè)二分函數(shù).
  • d3.shuffle - 洗牌,隨機(jī)排列數(shù)組中的元素.
  • d3.permute - 以指定順序排列數(shù)組中的元素.
  • d3.zip - 將多個(gè)數(shù)組合并成一個(gè)數(shù)組的數(shù)組,新數(shù)組的的第i個(gè)元素是原來各個(gè)數(shù)組中第i個(gè)元素組成的數(shù)組.
  • d3.transpose - 矩陣轉(zhuǎn)置,通過d3.zip實(shí)現(xiàn).
  • d3.pairs - 返回臨近元素對的數(shù)組,d3.pairs([1, 2, 3, 4]); // returns [ [1, 2], [2, 3], [3, 4] ].
  • d3.keys - 返回關(guān)聯(lián)數(shù)組(哈希表、json、object對象)的key組成的數(shù)組.
  • d3.values - 返回關(guān)聯(lián)數(shù)組的value組成的數(shù)組.
  • d3.entries - 返回關(guān)聯(lián)數(shù)組的key-value實(shí)體組成的數(shù)組, d3.entries({ foo: 42 }); // returns [{key: "foo", value: 42}].
  • d3.merge - 將多個(gè)數(shù)組連成一個(gè),類似于原生方法concat. d3.merge([ [1], [2, 3] ]); // returns [1, 2, 3].
  • d3.range - 獲得一個(gè)數(shù)列. d3.range([start, ]stop[, step])
  • d3.nest - 獲得一個(gè)nest對象,將數(shù)組組織成層級結(jié)構(gòu). 示例:http://bl.ocks.org/phoebebright/raw/3176159/
  • nest.key - 為nest層級結(jié)構(gòu)增加一個(gè)層級.
  • nest.sortKeys - 將當(dāng)前的nest層級結(jié)構(gòu)按key排序.
  • nest.sortValues - 將葉nest層級按value排序.
  • nest.rollup - 設(shè)置修改葉節(jié)點(diǎn)值的函數(shù).
  • nest.map - 執(zhí)行nest操作, 返回一個(gè)關(guān)聯(lián)數(shù)組(json).
  • nest.entries - 執(zhí)行nest操作, 返回一個(gè)key-value數(shù)組. 如果nest.map返回的結(jié)果類似于{ foo: 42 }, 則nest.entries返回的結(jié)果類似于[{key: "foo", value: 42}].
  • d3.map - 將javascript的object轉(zhuǎn)化為hash,屏蔽了object的原型鏈功能導(dǎo)致的與hash不一致的問題。
  • map.has - map有某個(gè)key就返回true.
  • map.get - 返回map中某個(gè)key對應(yīng)的value.
  • map.set - 設(shè)置map中某個(gè)key對應(yīng)的value.
  • map.remove - 刪除map中的某個(gè)key.
  • map.keys - 返回map中所有key組成的數(shù)組.
  • map.values - 返回map中所有value組成的數(shù)組.
  • map.entries - 返回map中所有entry(key-value鍵值對)組成的數(shù)組.類似于{ foo: 42 }轉(zhuǎn)化成[{key: "foo", value: 42}]
  • map.forEach - 對map中每一個(gè)entry執(zhí)行某個(gè)函數(shù).
  • d3.set - 將javascript的array轉(zhuǎn)化為set,屏蔽了array的object原型鏈功能導(dǎo)致的與set不一致的問題。set中的value是array中每個(gè)值轉(zhuǎn)換成字符串的結(jié)果。set中的value是去重過的。
  • set.has - 返回set中是否含有某個(gè)value.
  • set.add - 添加某個(gè)value.
  • set.remove - 刪除某個(gè)value.
  • set.values - 返回set中的值組成的數(shù)組.set中的value是去重過的.
  • set.forEach - 對set中每一個(gè)value執(zhí)行某個(gè)函數(shù).

Math