2. 程式人生 > >D3.js中Stream graph詳解

D3.js中Stream graph詳解

阿新 • • 發佈：2019-01-12
var n = 20, // number of layers 層的總數 m = 200, // number of samples per layer 每層的樣本數目 k = 10; // number of bumps per layer 每層的顛簸總數 // d3.stack()用來生成一個新的堆疊生成器 // stack.keys(d3.range(n))用來生成一個以0到n-1為主鍵的堆疊生成器 // stack.offset(),預設情況下stacked series的baseline為0， // 然而我們也可以配置stack generator的offset來達到不同的baseline效果。這裡設定的offset為
// d3.stackOffsetWiggle 是專門用於流圖，設定流圖堆疊的offset,通過移動基線來減少層的加權擺動 var stack = d3.stack().keys(d3.range(n)).offset(d3.stackOffsetWiggle), // bumps(m, k)用來返回顛簸k次的長度為m的陣列 // d3.range(n).map(function() { return bumps(m, k); })用來生成n*m的矩陣 // d3.transpose()用來對生成的n*m的矩陣進行轉置 // 因此layers0用來儲存堆疊佈局後的資料，其中有n個系列，每個系列有m個數據點，每個資料點
// 有一個最低點和頂點值，形如[lower,upper]這樣的形式，lower和upper分別用來定義基線和頂線 layers0 = stack(d3.transpose(d3.range(n).map(function() { return bumps(m, k); }))), //layers1和layers0的計算方法一樣，但是值由於隨機函式的影響，會有所不同，這裡計算layers1 // 主要是用來顯示左上角“update”按鈕對應的切換效果 layers1 = stack(d3.transpose(d3.range(n).map(function() {
return bumps(m, k); }))), // 將layers1和layers0兩個矩陣連線起來 layers = layers0.concat(layers1); // 獲取svg元素 var svg = d3.select("svg"), // 獲取svg元素的寬度 width = +svg.attr("width"), // 獲取svg元素的高度 height = +svg.attr("height"); // 定義x軸比例尺 var x = d3.scaleLinear() // 定義定義域 .domain([0, m - 1]) // 定義值域 .range([0, width]); // 定義y軸比例尺 var y = d3.scaleLinear() // 定義定義域 .domain([d3.min(layers, stackMin), d3.max(layers, stackMax)]) // 定義值域 .range([height, 0]); // 定義一個感知彩虹顏色函式z() var z = d3.interpolateCool; // d3.area()是一個區域生成器,區域通過兩條線來界定 // d3.area().y0()定義了base line; // d3.area().y1()定義了top line; // d3.area().x()定義了x座標,其中base line和top line使用的是相同的x座標 var area = d3.area() .x(function(d, i) { return x(i); }) .y0(function(d) { return y(d[0]); }) .y1(function(d) { return y(d[1]); }); // 繪製面積區域，通過path元素來繪製 svg.selectAll("path") // 繫結資料 .data(layers0) .enter().append("path") // 通過area()函式來為path元素生成繪製所需的資料 .attr("d", area) // 設定填充色，通過z()顏色函式來獲取 .attr("fill", function() { return z(Math.random()); }); // 獲取堆疊資料矩陣的最大值 function stackMax(layer) { // 這裡取d[1]，是因為對於每個點d來說，d[1]大於d[0],因為d[0]是低點、d[1]是高點 return d3.max(layer, function(d) { return d[1]; }); } // 獲取堆疊資料矩陣的最小值 function stackMin(layer) { // 這裡取d[0]，是因為對於每個點d來說，d[0]小於d[1],因為d[0]是低點、d[1]是高點 return d3.min(layer, function(d) { return d[0]; }); } // 定義左上角 “update”按鈕的動作動畫 function transition() { var t; // 獲取path元素，並在一定的持續時間內重新繪製 d3.selectAll("path") // 這裡繫結的資料t，是layers1和layers0之間相互切換 .data((t = layers1, layers1 = layers0, layers0 = t)) .transition() // 動畫過渡持續時間 .duration(2500) // 動畫最終到達的狀態，這裡的area是切換後的資料所計算的新的值 .attr("d", area); } // Inspired by Lee Byron’s test data generator. // 該方法用於生成長度為n的陣列，其中通過m次顛簸，即呼叫dump(a,n)方法來變換a陣列,最終返回變換後的a陣列 function bumps(n, m) { var a = [], i; for (i = 0; i < n; ++i) a[i] = 0; for (i = 0; i < m; ++i) bump(a, n); return a; } // 該方法通過一定的隨機數的運算來變換陣列a的值 function bump(a, n) { var x = 1 / (0.1 + Math.random()), y = 2 * Math.random() - 0.5, z = 10 / (0.1 + Math.random()); for (var i = 0; i < n; i++) { var w = (i / n - y) * z; a[i] += x * Math.exp(-w * w); } }

相關推薦

D3.js中Stream graph詳解

var n = 20, // number of layers 層的總數 m = 200, // number of samples per layer 每層的樣本數目 k = 10; // number of bumps per layer 每層的顛簸總數 // d3.stack()

D3.js中Bullet Charts詳解

Bullet Charts 今天我們來聊一聊 佔地兒小卻能表達足夠豐富的資料資訊的子彈圖。 子彈圖，顧名思義是由於該類資訊圖的樣子很像子彈射出後帶出的軌道。子彈圖無修飾的線性表達方式使我們能夠在狹小的空間中表達豐富的資料資訊，這種情況在寸尺寸金的報紙媒

D3.js中Population Pyramid詳解

// 定義相關尺寸 // margin定義svg畫圖的上 、右、下、左的外邊距 var margin = {top: 20, right: 40, bottom: 30, left: 20}, // 計算寬度 width = 960 - margin.left - margin.righ

js中的attribute詳解

介紹 特點 奇怪 使用方式 get inner () input 關於 Attribute是屬性的意思，文章僅對部分兼容IE和FF的Attribute相關的介紹。 attributes：獲取一個屬性作為對象 getAttribute：獲取某一個屬性的值setAttribu

JS中的showModelDialog詳解和實例

cti 信息 創建 字符 非模態窗口 tle cin dialog ima 1.<a href="#" onclick="SeePic(‘${list.PATH}‘)"><font color="blue">預覽</font></a

JS中document.cookie詳解

一個 參數 position 函數實現 some document urn 重新 地址 什麽是cookie? cookie 是存儲於訪問者的計算機中的變量。每當同一臺計算機通過瀏覽器請求某個頁面時，就會發送這個 cookie。你可以使用 JavaScript 來創建和取回

JS中陣列方法詳解

JS中陣列的方法有很多，但是自己一直沒有抽時間進行整理分類，故單獨寫一篇博文，對目前我所掌握的JS中陣列相關的方法進行整理，夯實一下自己的基礎。 我將陣列相關的方法分為兩類 1.方法會改變原陣列 相應的方法有：shift、unshift、pop、push、rev

js中的繼承詳解

js中的繼承 假設我們有一個Animal類，我們想構造Cat類，Cat類可以繼承Animal類的屬性和方法。以這個場景為列，我來講一講我所理解的js的繼承。 構造繼承 function Animal(name){ this.name = name; th

Python-JS中的事件詳解

err 右鍵 win 樣式 重新 形參 stop can 失去 目錄一、JS中的事件二、JS中的事件分類: 1.事件初級: 2.事件參數 Event 3.鼠標事件 4.鍵盤事件 *** 5.表單事件 *** 6.文檔事件 * 7.圖

js中的this詳解

this是js中的一個關鍵字。 在瞭解this之前，先了解一下js中的執行環境。執行環境是js中最為重要的一個概念，js中的執行環境主要有兩種：全域性執行環境和函式執行環境。執行環境（Execution Context ）簡稱EC，可以將其看作一個物件，它由變數物件、thi

js中getBoundingClientRect()方法詳解

getBoundingClientRect獲取元素位置 getBoundingClientRect用於獲得頁面中某個元素的左，上，右和下分別相對瀏覽器視窗的位置。 getBoundingClientRect是DOM元素到瀏覽器可視範圍的距離（不包含文檔卷起

JS中arguments物件詳解

1、在JavaScript中，arguments物件是比較特別的一個物件，實際上是當前函式的一個內建屬性。arguments非常類似Array，但實際上又不是一個Array例項。可以通過如下程式碼得以證實（當然，實際上，在函式funcArg中，呼叫argum

JS中window.showModalDialog()詳解

window.showModalDialog()方法用來建立一個顯示HTML內容的模態對話方塊。  window.showModelessDialog()方法用來建立一個顯示HTML內容的非模態對話方塊。  使用方法： vReturnValue = window.sho

JS中navigator物件詳解

<!doctype html> <html> <head> <meta charset="UTF-8"> <title>Navigator詳解,IE11，chrome和firefox瀏覽器下<

JS中this關鍵字詳解

this是Javascript語言的一個關鍵字。 它代表函式執行時，自動生成的一個內部物件，只能在函式內部使用。比如， 　　function test(){ 　　　　this.x = 1; 　　} 隨著函式使用場合的不同，this的值會發生變化。但是有

D3.js中Radial Cluster Dendrogram詳解

Radial Cluster Dendrogram 上一篇聊了Cluster Dendrogram，這一篇對照著聊一聊Radial Cluster Dendrogram. “radial”意思為放射狀的，因此，估計你也能猜到Radial Cluster Den

Java8中的Stream API詳解:Stream的背景及使用

摘要： 　　 　　Stream是Java8的一大亮點，是對容器物件功能的增強，它專注於對容器物件進行各種非常便利、高效的 聚合操作（aggregate operation）或者大批量資料操作。Stream API藉助於同樣新出現的Lambda表示式，極大的提

Web開發中基礎常識詳解-Js，JSP，tomcat，Servlet，web是幹什麼的？

關於Servlet開發的詳解  http://blog.csdn.net/hejingyuan6/article/details/30273879http://www.cnblogs.com/xdp-gacl/p/3760336.html一、Js 是 javascript 的

Vue.js 插件開發詳解

js 前言隨著 Vue.js 越來越火，Vue.js 的相關插件也在不斷的被貢獻出來，數不勝數。比如官方推薦的 vue-router、vuex 等，都是非常優秀的插件。但是我們更多的人還只停留在使用的階段，比較少自己開發。所以接下來會通過一個簡單的 vue-toast 插件，來了解掌握插件的開發和使用。

C/C++中extern關鍵字詳解

編譯器 fin 生成 接口 bcd 只需要 c++環境 結束 編程 轉自：http://www.cnblogs.com/yc_sunniwell/archive/2010/07/14/1777431.html 1 基本解釋：extern可以置於變量或者函數前，以標示變量或者