軟件項目技術點(1)——d3.interpolateZoom-在兩個點之間平滑地縮放平移

時間  2019-11-07
標籤 軟件 項目 技術 d3.interpolatezoom interpolatezoom 兩個 之間 平滑 縮放 平移 简体版
原文   原文鏈接

AxeSlide軟件項目梳理   canvas繪圖系列知識點整理

軟件參考d3的知識點

咱們在軟件中主要用到d3.js的核心函數d3.interpolateZoom - 在兩個點之間平滑地縮放平移。請查看示例，效果以下平滑的縮放平移。javascript

 

 實現該效果使用d3的js代碼html

 1         var width = 960,
 2             height = 500,
 3             radius = 10;
 4 
 5         var p0 = [250, 200, 60],
 6             p1 = [560, 300, 120];
 7 
 8         var svg = d3.select("body").append("svg")
 9             .attr("width", width)
10             .attr("height", height)
11           .append("g")
12             .call(transition, p0, p1);
13 
14         svg.append("path")
15             .attr("class", "mesh")
16             .attr("d", d3.hexbin()
17               .size([width, height])
18               .radius(radius)
19               .mesh);
20 
21         svg.selectAll("circle")
22             .data([p0, p1])
23           .enter().append("circle")
24             .attr("class", function (d, i) { return i ? "end" : "start"; })
25             .attr("cx", function (d) { return d[0]; })
26             .attr("cy", function (d) { return d[1]; })
27             .attr("r", function (d) { return d[2] / 2 - .5; });
28 
29         function transition(svg, start, end) {
30             var center = [width / 2, height / 2];
31               var  i = d3.interpolateZoom(start, end);
32 
33             svg
34                 .attr("transform", transform(start))
35               .transition()
36                 .delay(250)
37                 .duration(i.duration * 2)
38                 .attrTween("transform", function () {
39 
40                     return function (t) {
41                         var data1 = i(t);
42                       
43                         var data2 = transform(data1);
44                         return data2;
45                     };
46                 })
47                 .each("end", function () { d3.select(this).call(transition, end, start); });
48 
49             function transform(p) {
50                 var k = height / p[2];
51                 console.log(k);
52                 var trans= "translate(" + (center[0] - p[0] * k) + "," + (center[1] - p[1] * k) + ")scale(" + k + ")";
53               //  console.log(trans);
54                 return trans;
55             }
56         }

應用到咱們的canvas繪圖也同樣，主要初始化p0，p1兩個參數，經過d3.interpolateZoom(start, end)獲得計算當前時間t下具體位置的函數t。java

核心計算代碼以下：node

 1 // p0 = [ux0, uy0, w0]
 2 // p1 = [ux1, uy1, w1]
 3 export class interpolateZoom {
 4     rou = Math.SQRT2;
 5     rou2 = 2;
 6     rou4 = 4;
 7     p0;
 8     p1;
 9     ux0; uy0; w0;
10     ux1; uy1; w1;
11     dx;
12     dy;
13     d2;
14     d1;
15     b0;
16     b1;
17     r0;
18     r1;
19     dr;
20     S;
21     duration: number;
22 
23     constructor(p0, p1, rou) {
24         if (rou != null && rou != undefined) {
25             this.rou = rou;
26             this.rou2 = Math.pow(this.rou, 2);
27             this.rou4 = Math.pow(this.rou, 4);
28         }
29         this.p0 = p0;
30         this.p1 = p1;
31         this.ux0 = p0[0], this.uy0 = p0[1], this.w0 = p0[2],
32             this.ux1 = p1[0], this.uy1 = p1[1], this.w1 = p1[2];
33         this.dx = this.ux1 - this.ux0,
34             this.dy = this.uy1 - this.uy0,
35             this.d2 = this.dx * this.dx + this.dy * this.dy,
36             this.d1 = Math.sqrt(this.d2),
37             this.b0 = (this.w1 * this.w1 - this.w0 * this.w0 + this.rou4 * this.d2) / (2 * this.w0 * this.rou2 * this.d1),
38             this.b1 = (this.w1 * this.w1 - this.w0 * this.w0 - this.rou4 * this.d2) / (2 * this.w1 * this.rou2 * this.d1),
39             this.r0 = Math.log(Math.sqrt(this.b0 * this.b0 + 1) - this.b0),
40             this.r1 = Math.log(Math.sqrt(this.b1 * this.b1 + 1) - this.b1),
41             this.dr = this.r1 - this.r0,
42             this.S = (this.dr || Math.log(this.w1 / this.w0)) / this.rou;
43         //console.log(this.rou,this.S);
44         this.duration = this.S * 1000 / 1.2;//除1.2 將duration縮小點
45 
46     }
47     interpolate(t) {
48         var s = t * this.S;
49         if (this.dr) {
50             // General case.
51             var coshr0 = this.cosh(this.r0),
52                 u = this.w0 / (this.rou2 * this.d1) * (coshr0 * this.tanh(this.rou * s + this.r0) - this.sinh(this.r0));
53             return [
54                 this.ux0 + u * this.dx,
55                 this.uy0 + u * this.dy,
56                 this.w0 * coshr0 / this.cosh(this.rou * s + this.r0)
57             ];
58         }
59         // Special case for u0 ~= u1.
60         return [
61             this.ux0 + t * this.dx,
62             this.uy0 + t * this.dy,
63             this.w0 * Math.exp(this.rou * s)
64         ];
65     }
66 
67     cosh(x) {
68         return (Math.exp(x) + Math.exp(-x)) / 2;
69     }
70     sinh(x) {
71         return (Math.exp(x) - Math.exp(-x)) / 2;
72     }
73     tanh(x) {
74         return this.sinh(x) / this.cosh(x);
75     }
76 }

 

d3.js的API

選擇集

  • d3.select - 從當前文檔中選擇一系列元素。git

  • d3.selectAll - 從當前文檔中選擇多項元素。github

  • selection.attr - 設置或獲取指定屬性。正則表達式

  • selection.classed - 添加或刪除選定元素的 CSS 類（CSS class）。算法

  • selection.style - 設置或刪除 CSS 屬性。style優先級高於attr。編程

  • selection.property - 設置或獲原生的屬性值（raw property）。json

  • 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分佈（簡單可行而且容易編程的正態分佈實現方法）產生一個隨機數.

  • 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");

Colors

  • 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

座標軸(Axes)

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.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)

直方圖(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)

餅圖(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

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 - create a zoom behavior.

  • zoom - apply the zoom behavior to the selected elements.

  • 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.

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程