D3.js學習總結(五)——基本繪製(1)
線段
在SVG中,線段的元素是<line>,或者<path>也可以繪製線段。所以d3程式碼為如下形式:
// line形式新增線段
svg.append("line")
.attr("x1", 20).attr("y1", 20)
.attr("x2", 300).attr("y2", 100)
.attr("stroke", "black");
// path形式新增線段
svg.append("path")
.attr("d", "M20,20L300,100")
.attr("stroke", "black");
如果存在多個點的情況,可以使用d3的“line生成器”。如下:
// 線段的點資料,每一項是一個點的X和Y座標
var points = [[80, 80], [200, 100], [200, 200], [100, 200]];
// 建立一個線段生成器
var linePath = d3.line();
// 新增路徑
svg.append("path")
.attr("d", linePath(points))
.attr("stroke", "black")
.attr("fill", "none");
- d3.line()——建立一個線段生成器;
- line(data)——使用指定的資料生成一條線,給定的資料順序應該按照x值排序好;
- line.x([x])——設定或獲取線段的x座標訪問器;
- line.y([y])——設定或獲取線段的y座標訪問器;
- line.defined([defined])——設定或獲取defined訪問器,這個訪問器用於指定在資料缺失的時候該如何操作。預設的訪問器假定所有的輸入資料都是正義的;
- line.curve([curve])——設定線段的曲線模式,即兩個點之間如何連線。預設為curveLinear(線性插值,折線模式);
line.x()和line.y()是訪問器,用於獲取資料。預設定義如下:
.x(function(d){ return d[0]; })
.y(function(d) { return d[1]; })
也可以自定義需要返回的資料,如下:
var linePath = d3.line()
.x(function(d){ return d[0]; })
.y(function(d, i){ return i%2==0 ? 40 : 120; })
defined()預設返回為true,即所有的點都認為是需要繪製的。可以通過defined()來篩除不需要的資料。例如:
var linePath = d3.line()
.defined(function(d){
if(d[0] >= 100){ return true; }
});
上面的程式碼就把第一個點給排除了,不再繪製。
line.curve()設定曲線模式,預設為line.curve(d3. curveLinear),即點之間以直線相連。曲線模式包括:
d3.curveLinear——線性插值,那就是折線;
d3.curveLinearClosed——閉合的折線
d3.curveMonotoneX——生成一個在y方向保持單調性的曲線;
d3.curveMonotoneY——生成一個在x方向保持單調性的曲線
d3.curveNatural——生成一個“自然的三次曲線”,曲線在終點的二階導數為0;
d3.curveStep——臺階狀的折線。y值在兩個相鄰的點x值中間點發生變化;
d3.curveStepAfter——臺階狀(step function)的折線,注意y值變化的位置;
d3.curveStepBefore——臺階狀(step function)的折線,注意y值變化的位置;
區域
如同線段的生成,D3提供了區域生成器d3.area()來定義個區域。對於線段來說,需要提供點的x座標和y座標。所以,d3.line()有兩個資料訪問器x()和y()。而對於area()來說,有六個資料訪問器,分別是:
第一組:x,y0,y1;
第二組:y,x0,x1;
從二維的角度來說,區域是由兩條邊界線閉合而成的,邊界線可以是曲線也可以是直線。無論哪種形式,通常來說兩條線共享一個x座標,所不同的只是y座標(即y0和y1)。如下圖所示:
所以我們在定義區域的時候,需要定義這三個資料訪問器該如何取值。以y軸為基準來說,共享的就是y座標,不同的是x座標(x0和x1)。通常來說,y0是一個常量。如下程式碼:
var dataset = [80, 120, 130, 70, 60, 90];
// 建立一個區域生成器
var areaPath = d3.area()
.x(function(d, i){ return 50+i*80; })
.y0(function(d, i){ return height/2; })
.y1(function(d, i){ return height/2-d; });
// 新增路徑
svg.append("path")
.attr("d", areaPath(dataset))
.attr("stroke", "black")
.attr("fill", "yellow");
和線段一樣,也有area.curve()來設定插值模式。
相關推薦
D3.js學習總結(五)——基本繪製(1)
線段 在SVG中,線段的元素是<line>,或者<path>也可以繪製線段。所以d3程式碼為如下形式: // line形式新增線段 svg.append("line") .attr("x1", 20).attr("y1
javaweb學習總結(十五)——JSP基礎語法(轉)
troy 嚴格 too cal service alt 隱式 情況 當前系統時間 任何語言都有自己的語法,JAVA中有,JSP雖然是在JAVA上的一種應用,但是依然有其自己擴充的語法,而且在JSP中,所有的JAVA語句都可以使用。 一、JSP模版元素 JSP頁面中的H
個人js學習總結-陣列字串的轉換join()、split()
<script> //contat()用於連結兩個及以上陣列,但不改變現有的陣列,僅僅返回被連線陣列的一個副本 var arr01 = [1,2,3]; var arr02 = ["a","b","c"]; arr01.contat(arr02); //結果為[1
d3.js學習筆記 (五) (打包圖與冒泡圖)
打包圖僅表示資料間包含關係,打包圖如下示例: var width = 500; var height = 500; //================設定打包圖佈局======================= var pack = d3.layout.p
js學習總結:DOM節點二(dom基本操作)
一、DOM繼承樹 DOM——Document Object Model DOM定義了表示修改文件所需要的方法。DOM物件即為宿主物件,由瀏覽器廠商定義,用來操作html和xml的一類廠商定義,也有人稱DOM是對HTML以及xml的標準程式設計介面。 繼承樹模型圖: 1.document繼承於HTM
d3.js學習筆記(二):完整的柱狀圖示例
本示例採用d3的3.x版本庫,示例程式碼如下: d3.fullAxisExample = function() { var width = 240; var height = 240; //在 body 裡新增一個 SVG 畫布
D3.js學習筆記(一)
D3.js學習資源: http://wiki.jikexueyuan.com/project/d3wiki/introduction.html 極客學院關於D3.js的系列文章; http://d3.decembercafe.org/ http://www.ourd3js.com/wor
d3.js學習筆記(四)力導向示意圖
d3.drawForceGraph = function () { var nodes = [{ name: "桂林" }, { name: "廣州" }, { name: "廈門" }, { name: "杭州" }, { name: "上
d3.js學習筆記(三) 餅圖示例
d3.testPies = function () { originalData = [30, 10, 43, 55, 13]; width = 1200; height = 200; radius = 240;
d3.js學習筆記(六)樹圖
樹形圖直觀的反應了資料之間的層次關係是現實應用中使用的比較普遍的一類圖形化資料表示方法,使用d3.js繪製樹狀圖的過程中,採取橫縱座標交換方式,可實現思維導圖形式的樹狀圖,示例程式碼如下: var width = 800, height = 800;
個人js學習總結-陣列內容的新增和刪除的方法-push()、unshift()、pop()、shift()
<script> var arr = [1,2,3,4,5]; //新增陣列內容 //1、使用push()可以向陣列的末尾新增一個及一個以上的元素,並返回新的長度,把6放到最後面 arr.push(6); console.log(arr.push(6));//返回
Vue.js學習總結(一.)
1、什麼是Vue.js: Vue.js是一套構建使用者介面的漸進式框架。 Vue的核心庫只關注檢視層 Vue.js的目標是通過儘可能簡單的API實現響應的資料繫結和組合的檢視元件 2、單頁應用程式(SPA) 單頁應用一般指的就是一個頁面就是應用,當然也可以是一個子應用。 3、Vue.js為什麼
d3.js學習筆記(三) 餅圖示例
d3.testPies = function () { originalData = [30, 10, 43, 55, 13]; width = 1200; height = 200; radius = 2
js學習總結(一)
這一部分是學習js初的相關筆記,整理的時候也是對知識點的回顧 1、JavaScript初步 定義:JavaScript 是一種具有面向物件(OOP)能力的、解釋型(直接讀程式碼執行)的程式設計語言。更具體一點,它是基於物件和事件驅動(例如:需要點選
Vue.js學習總結(2)——Vue.js2.X + ElementUI開發環境搭建
一、開發前準備: Vue專案通常通過webpack工具來構建,而webpack命令的執行是依賴node.js的環境的,所以首先要安裝node.js。(官方地址:https://nodejs.org/e
JPA學習(五、JPA_二級緩存)
level follow have cati mil 使用 軟件 什麽 idl 框架學習之JPA(五) JPA是Java Persistence API的簡稱,中文名Java持久層API,是JDK 5.0註解或XML描述對象-關系表的映射關系,並將運行期的實體對象持久化到數
linux學習之路:2.基本指令(2)
inux 可執行文件 選項 說明 獨立 選項說明 img color 配置 一、在線求助:man page 與info page 1.man(manual:操作說明) page 我想查看日歷,所以我輸入man cal 效果如圖: 圖中CAL(1)中,在不同的指令中數字的含
《機器學習》 周志華學習筆記第五章 神經網路(課後習題) python實現
1.神經元模型 2.感知機與多層網路 3.誤差逆傳播演算法 (A)BP演算法:最小化訓練集D上的累積誤差 標準BP演算法:更新規則基於單個Ek推導而得 兩種策略防止過擬合:(1)早停(通過驗證集來判斷,訓練集誤差降低,驗證集誤差升高)(2) 正則化:在誤差目標函式中引入描述網
oracle逐步學習總結之oracle分頁查詢(基礎三)
原創作品,轉載請在文章開頭明顯位置註明出處:https://www.cnblogs.com/sunshine5683/p/10087205.html oracle 的分頁有三種,下面將這三種方式一一列舉,進行分析: 一、根據rowid來分頁 二、根據分
3ds max學習筆記(六)-- 基本操作(建模前奏)
1.介面設定 在3ds Max的版本的介面中,預設是較深。若需要切換至較亮的介面,步驟: 執行“自定義”選單,選擇“載入自定義使用者介面方案”從彈出的介面中選擇樣式檔案,單擊“開啟”即可; 注:“amg-light.ui” 介面的顯示方式,是淺灰色為主的顯示介面; 2.單位設定 在製作效果圖的時候,