D3入門文檔

時間 2019-11-09

標籤 d3 入門文檔简体版

原文原文鏈接

前言

原本在另外一篇裏已經寫了一點了，不知爲啥，我再編輯更新內容一直保存不了，無奈只能再新建立一篇文章了。html

SVG簡介

什麼是SVG： SVG 指可伸縮矢量圖形 (Scalable Vector Graphics) SVG 用來定義用於網絡的基於矢量的圖形，SVG 使用 XML 格式定義圖形。SVG 圖像在放大或改變尺寸的狀況下其圖形質量不會有所損失。api

SVG 的歷史和優點：
在 2003 年一月，SVG 1.1 被確立爲 W3C 標準。數組

參與定義 SVG 的組織有：Sun公司（已被Oracle公司收購）、Adobe、蘋果公司、IBM 以及柯達。瀏覽器

與其餘圖像格式相比，使用 SVG 的優點在於：網絡

SVG 可被很是多的工具讀取和修改，好比記事本。
SVG 與 JPEG 和 GIF 圖像比起來，尺寸更小，且可壓縮性更強。
SVG 是可伸縮的 SVG 圖像可在任何的分辨率下被高質量地打印。
SVG 可在圖像質量不降低的狀況下被放大。
SVG 圖像中的文本是可選的，同時也是可搜索的（很適合製做地圖）
SVG 是開放的標準
SVG 文件是純粹的 XML
Flash 相比，SVG 最大的優點是與其餘標準（好比 XSL 和 DOM）相兼容。而 Flash 則是未開源的私有技術

SVG元素

rect : x="10" y="10" height="90" width="90" rx="5" ry="5"

x,y就是矩形左上角座標，rx，ry就是矩形的圓角寬高。

app

circle ： cx="50" cy="150" r="40"

cx、cy就是圓心座標，r是半徑

dom

ellipse ：cx="150" cy="150" rx="50" ry="30"

cx、cy就是圓心座標，rx、ry就是圓的長寬兩個半徑

svg

line：x1="10" y1="200" x2="10" y2="300"

（x1,y1）是起點座標，(x2,y2)是終點座標。

函數

polyline：points="80,320 130,320 95,400 80,320"

points就是一系列的座標點，從第一個點開始直線鏈接下一個點，直到結束。若是你想要圖形封閉，能夠把起始點再加在末尾。

工具

path: <path d="M50,50 A30,30 0 0,1 35,20 L100,100 M110,11 L100,0" style="stroke:#660000; fill:none;"/>

path元素的全部繪圖都在d屬性中指定。d屬性包含繪製命令。上面的例子中，M發出「移至」命令，A發出「弧」命令，L發出「線段」命令。這些命令都做用在一個「虛擬畫筆」。這支筆能夠移動，繪製形狀等。

這是一個例子

SVG座標系

在SVG座標系中，x=0,y=0點在左上角。與正常的圖座標系相比，y軸被反轉。隨着SVG中y的增長，點、形狀等向下移動，而不是向上。

D3簡介

D3 的全稱是（Data-Driven Documents）, 顧名思義能夠知道是一個被數據驅動的文檔。D3.js是一個基於數據的操做文檔的JavaScript庫，可讓你綁定任何數據到DOM，支持DIV這種圖案生成，也支持SVG這種圖案的生成。D3幫助你屏蔽了瀏覽器差別，作出來圖案的效果能夠說是炫目得一塌糊塗，但是代碼卻很簡潔。

模塊劃分

D3能夠整個模塊安裝使用，也能夠只安裝你須要的模塊
下面是我用過的幾個模塊
Arrays (Statistics, Search, Transformations, Histograms)
數組操做，排序，搜索，總結，統計數據，變換，直方圖
Axes
建立座標軸，以及座標軸相關的設置，操做等。會建立相關dom元素
Brushes
刷子組件，選擇區域用。會建立相關dom元素
Dragging
拖拽組件，用於實現拖拽事件
Scales (Continuous, Sequential, Quantize, Ordinal)
比例尺，會和座標軸結合使用
Selections (Selecting, Modifying, Data, Events, Control, Local Variables, Namespaces)
選擇集
Transitions
過渡組件，用來定義一些過渡效果
Zooming
縮放組件
Shapes (Arcs, Pies, Lines, Areas, Curves, Links, Symbols, Stacks)
數據集到幾何數據的轉換

API

Arrays (d3-array)

數組操做，排序，搜索，統計數據，變換，直方圖
 
Statistics（統計）基本的統計數據方法
下面這些方法的第二個參數均可以指定一個可選的訪問器函數，這至關於在計算總和以前調用array.map（訪問器）。這些方法忽略未定義的和NaN值; 這對忽略缺失數據頗有用。

d3.min - d3.max(array)，d3.min(array)，返回數組的最小值
d3.max - d3.max(array)，返回數組最大值。

與內建的Math.max不一樣，此方法忽略未定義的值; 這對忽略缺失數據頗有用。另外，使用天然順序而不是數字順序比較元素。例如，字符串[「20」，「3」]的最大值是「3」，而數字[20,3]的最大值是20。

d3.extent - d3.extent(array)，把數組的最小最大值放在一個數組裏返回
d3.sum -d3.sum(array)，返回一個數字數組的累計和
d3.mean - 回給定數字數組的平均值。
d3.median - 返回給定數組的中值。
d3.quantile - d3.quantile(array, 0.5)，返回給定數組的分位數。
d3.variance - 返回給定數組的整體方差。
d3.deviation - 返回給定數組的標準誤差。

Search

d3.scan

掃描數組，按照比較器比較，返回最小值，相似於min方法。

var array = [{foo: 42}, {foo: 91}];
d3.scan(array, function(a, b) { return a.foo - b.foo; }); // 0
d3.scan(array, function(a, b) { return b.foo - a.foo; }); // 1

d3.ascending(a, b)
d3.descending(a, b)

這兩個都是排序的方法，結合array.sort()使用。
 
Transformations
用於轉換數組，生成新數組的方法

d3.cross

返回兩個數組a和b的笛卡爾乘積

d3.cross([1, 2], ["x", "y"]); // returns [[1, "x"], [1, "y"], [2, "x"], [2, "y"]]
d3.cross([1, 2], ["x", "y"], (a, b) => a + b); // returns ["1x", "1y", "2x", "2y"]

d3.merge

將指定的數組合併到一個數組中, 這種方法相似於內置的數組concat方法; 惟一的區別是當你有一個數組數組時，它更方便。

d3.merge([[1], [2, 3]]); // returns [1, 2, 3]

d3.pairs(array[, reducer])

對於指定數組中的每一個相鄰元素對，按順序調用指定的傳遞元素i和元素i-1的reducer函數。

d3.pairs([1, 2, 3, 4]); // returns [[1, 2], [2, 3], [3, 4]]
d3.pairs([1, 2, 3, 4], (a, b) => b - a); // returns [1, 1, 1];

Selections (d3-selection)

Selecting Elements
d3選擇器對象，有兩個屬性：_groups:Array(),_parents:Array()。_groups裏存的就是選中元素的dom對象

d3.selection

d3.selection() 返回選擇根元素（html）的d3選擇器對象

d3.select

d3.select('.block')返回選擇的元素的D3選擇器對象

d3.selectAll

d3.selectAll('.block') 返回匹配的全部的元素的數組
以上3個方法是d3的靜態方法，下面這3個對應着相同的原型方法。

selection.select

爲每一個選定的元素選擇一個匹配的後代元素。

selection.selectAll

爲每一個選定元素選擇全部匹配的後代。

selection.filter 過濾選定的元素，對每一個選定元素執行filter方法

var even = d3.selectAll("tr").filter(":nth-child(even)");
var even = d3.selectAll("tr:nth-child(even)");
var even = d3.selectAll("tr").select(function(d, i) { return i & 1 ? this : null; });

selection.merge

把已選定的組和另外指定的選擇合併成一個選擇器。但使用起來要注意，他不能把任意的兩個選擇合併。

d3.matcher

測試一個元素是否匹配給定的選擇器，通常用來和filter結合使用
var div = selection.filter(d3.matcher("div"));

後面還有幾個方法，就不一一說了，感受很雞肋，基本不用，就不說了。。。
Modifying Elements

selection.attr - get or set an attribute.注意不能使用對象的形式一塊兒傳參數設置。
selection.classed - get, add or remove CSS classes.
selection.style - get or set a style property.

d3.select('.block svg')
.attr('width',500)
.attr('height',500)
.classed('chart first', true)
.classed('chart', false)
.style('background','#f0f')
.style('border','5px solid #0ff')

selection.property

某些HTML元素具備特殊屬性，這些屬性不能經過屬性或樣式進行尋址，例如表單字段的文本值和複選框的選中布爾值。使用此方法獲取或設置這些屬性。

selection.text - get or set the text content.
selection.html - get or set the inner HTML.
selection.append

在所選元素的後面添加一個子元素，並返回該元素的選擇器對象

selection.insert

d3.select('svg').insert('line','circle')

在svg裏面的第一個匹配到'circle'的元素前面插入一個line元素。

selection.remove - remove elements from the document.
selection.clone - insert clones of selected elements.
selection.sort - sort elements in the document based on data.
selection.order - reorders elements in the document to match the selection.
selection.raise

按順序從新插入每一個選定元素，使這個選定元素做爲其父項的最後一個子項。

selection.lower

按順序從新插入每一個選定元素，使這個選定元素做爲其父項的第一個子項。

d3.create - create and select a detached element.
d3.creator - create an element by name.

這是一個例子

Joining Data
綁定數據

selection.data

綁定一個數組到選擇集上，數組的各項值分別與選擇集的各元素綁定

selection.enter

返回缺失元素的選擇集

selection.exit

返回缺失數據的元素選擇集

selection.datum

綁定一個數據到選擇集上
 
數據綁定的例子

Scales (d3-scale)

一種計算關係，可以：將某一區域的值映射到另外一區域，其大小關係不變。
這就是比例尺（Scale）
有哪些比例尺
比例尺，很像數學中的函數。例如，對於一個一元二次函數，有 x 和 y 兩個未知數，當 x 的值肯定時，y 的值也就肯定了。
在數學中，x 的範圍被稱爲定義域，y 的範圍被稱爲值域。
D3 中的比例尺，也有定義域和值域，分別被稱爲 domain 和 range。開發者須要指定 domain 和 range 的範圍，如此便可獲得一個計算關係。

下面介紹兩種最經常使用的比例尺：

Continuous (Linear, Power, Log, Identity, Time)
連續型比例尺包括線性比例尺，指數比例尺，對數比例尺，恆等比例尺，時間比例尺

continuous

計算一個給定的定義域值對應的值域的值，或者說給個x返回y。

continuous.invert

正好和上面的相反，給定一個y，返回x

continuous.domain

設置定義域

continuous.range

設置值域

continuous.rangeRound

和range一樣，只是比range多一個功能，即啓用舍入。

continuous.clamp
x.clamp(true)
這個方法通俗點說就是：設置爲true，當你輸入的是domain範圍外的值時，返回始終是range範圍內的值，一般是range的邊界值。對invert也一樣；設置爲false，輸入的是domain範圍外的值，返回多是range的範圍外的值。
continuous.interpolate

設置輸出插值器。
這個方法，主要是知道是插值器，留着之後說吧。