d3.js筆記

通常的圖形都是有SVG的path元素構成的，每張圖都有不一樣的path元素，每一個path元素都有d屬性來定義path，如

下面大概簡單介紹下不一樣d3 shape的路徑生成器

Line generator

咱們給d3一個（x,y）座標的數組，d3就能生成一串path data string。咱們來定義一個作標數組：

var points = [[0,80],[100,100],[200,30],[300,50],[400,40],[500,80]]

lineGenerator的任務就是接收一個座標數組，輸出一個path data string直接能夠做爲path元素的d屬性值。

咱們首先聲明一個line generator:

var lineGenerator = d3.line();

var pathData =  lineGenerator(points);
// pathData is "M0,80L100,100L200,30L300,50L400,40L500,80"

d3.select('path')
    .attr('d',pathData)

　　

對於line generator函數，咱們能夠有如下能夠配置

• .x() and .y() accessor functions

默認狀況下每個數組元素都表明了一個2緯的數組，好比[0,100]，然而咱們也能夠告訴line generator來如何解讀傳入的數據，而這就要使用對應的accessor functions了:.x()和.y().例如假設咱們有如下對象的數組: 

var data = [{value:10},{value:50},{value:30},{value:40},{value:20},{value:70},{value:50}]

咱們就能夠這樣來定義accessor函數：

lineGenerator
    .x(function(d,i){
        return xScale(i);
    })
    .y(function(d){
        return yScale(d.value);
    })

在這個例子中，咱們使用數組的index來定義x,（注意咱們同時使用了比例尺函數）

• .defined() (to handle missing data)

var points = [[0,80],[100,100],null,[300,50],[400,40],[500,80]]

　咱們告知line generator 每個座標只有是non-null時纔是有效的，經過下面的代碼

lineGenerator
    .defined(function(d){
        return d !== null
    })

　　當咱們再次調用lineGenerator並渲染後就獲得一個有着斷斷續續的line

 

• .curve (to specify how the points are interpolated) and

咱們也能夠定義這個path的points之間是如何插值的。好比，咱們可使用一個B-spline算來來插值：

 

var lineGenerator = d3.line()
    .curve(d3.curveCardinal)

　　

 

雖然有至關多的不一樣類型的curve type在d3中可使用，可是咱們也能夠把這些插值類型簡單分爲兩類：一種是必須通過指定points的類型（好比:curveLinear,curveCardinal,curveCatmullRom,curveMonotone,curveNatural,curveStep），另外一種是沒必要通過每個points(好比curveBasics和curveBundle)

• .context() to render to a canvas element.

默認狀況下shape generator輸出SVG path data.然而咱們也能夠經過.context()函數來指定使用canvas來繪圖：

 

var context = d3.select('canvas').node().getContext('2d')

lineGenerator.context(context)

context.strokeStyle = '#999'
context.beginPath();
lineGenerator(points);
context.stroke()

還有一種特殊狀況

radial line generator和普通的line generator是相似的，惟一的不一樣是該generator對座標的解讀是「極座標系」（從12點開始順時針運行的）角度和半徑，而不是x,y座標:：

 

相似於lineGenerator,對應的accessor function .angle()和.radius()以下：

 

Area generator

區域生成器輸出一個經過兩條lines來定義的一個區域的path data來工做的。默認狀況下，它在y=0的水平線和一個由一個點數組來定義的多段線線之間生成一個區域：

 

咱們能夠經過.y0() accessor函數來定義這個base line:

 

就變成了以下的圖形：（一般狀況下咱們使用圖形的height做爲base line）

咱們也能夠給.y0() accessor函數一個函數來指明如何獲取y0的值，相似於.y1() accessor

典型地，.y0()定義了base line, .y1()定義了top line. 注意咱們也使用了.x()定義了x座標(base line和top line使用的是相同的x座標哦!!)

和line generator同樣，咱們能夠指定在點之間是如何插值的(.curve())，以及如何處理missing data(.defined())以及如何在canvas而不是在svg中渲染(.context())

 

還有一種特殊狀況

radial area generator和area generator是相似的，惟一的不一樣是這些點咱們是使用angle角度(從12點順時針開始的角度）和半徑radius來定義的，而不是x和y來定義的:

 

Stack generator

stack generator接收一個multi-series data而對每個series來生成一個數組，而每一個數組包含着各data point的lower和upper values

lower和upper values被用於計算位置這樣每一個series都堆疊在前一個series上面

 

.keys()配置函數定義了在stack generation中哪些series被包含其中。

.order()

 

.offset()

 

 

 

 

 

 

Arc generator

arc generator用於從angle和radius值來產生path data.下面建立一個arc 

隨後能夠給該generator傳入一個包含着startAngle, endAngle,innerRadius,outerRadius屬性值的對象來生成path data

 

咱們可使用innerRadius,outerRadius,startAngle,endAngle函數來配置，而不用每次生成arc generator時傳入對象參數：

 

咱們也能夠配置corner radius(corner Radius)以及弧線段之間的padding值(padAngle,padRadius)

 

 

 

Arc padding有兩個參數:padAngle和padRadius他們合在一塊兒定義了兩個相鄰弧段之間的距離。這樣在上面的例子中，padding distance就是0.02*100=2.注意padding計算時會盡量地保持(若是可能的話)弧段之間的邊界保持平行。

咱們也能夠爲startAngle, endAngle, innerRadius,outerRadius來定義對應的accessor functions

 

 

 

Centroid

有時，計算弧線的中心點是頗有用的，好比當咱們要放置label時，每每但願放到中心點附件，d3給咱們提供了一個.centroid()函數來實現

 

Pie generator

pie generator和弧線generator是相似的。給pie generator一個數據數組，pie generator就會輸出一個反映了原始start和end angles數據的對象數

 

 

隨後，咱們可使用一個arc generator來建立對應的path strings

注意pieGenerator的輸出包含了startAngle和endAngle兩個屬性。這些正好是arcGenerator所須要的輸入!

 

 

實際上pieGenerator是一個layout了，而不是路徑生成器！pie generator包含了一系列的配置函數，包括：.padAngle(),.startAngle(),.endAngle(),.sort(),.padAngle()定義了一個在相鄰段之間的angular padding

.startAngle() and .endAngle()配置pie chart的startAngle和endAngle. 這將容許建立半圓形的pie charts：

 

 

默認狀況下段的起始和結束角度使得段之間以降序排列。然而咱們能夠更改這種排序方式，方法是使用.sort()函數：

 

Symbols generator

symbol generator用於產生在可視化領域中經常使用的symbol的path data:

  

 

D3包含了下面的symbol types:

 

 

 

 

this.xAsis = vm.data

              .map((d) => {

                  return {

                      name: new Date(d.day),

 

                  }

              }); <g class="xAsis" v-for="(item,index) in xAsis">

            <rect width="2"

                  height="15"

                  :y="item.x - 15"

                  text-anchor="end"

                  fill="#49A3AE">{{item.name}}</rect>

        </g>