d3的一些總結

核心操做：https://blog.csdn.net/kriszhang/article/details/70174410

Update、Enter、Exit 簡練詳細說明：http://www.cnblogs.com/koto/p/5980646.html

D3.nest（相似於groupby,好比想對數據進行上卷或下鑽等數據立方的操做，能夠瞅一下這個連接）的使用：https://blog.csdn.net/gdp12315_gu/article/details/51721988

JS的模塊化說明（看懂第三方js庫的入門blog）：https://my.oschina.net/chenzhiqiang/blog/129783

二分圖源碼閱讀：https://github.com/NPashaP/Viz

關於d3的call函數的說明：

D3的call函數只在d3.select後出現，其餘狀況，均屬於js原生的call（這兩個call的做用和用法徹底不一樣，注意區分）。

好比你編寫了一個比較好用的自定義圖，確定須要指定一個容器來放置。好比echarts: echarts.init(容器); 把容器傳入api中，這是最簡單的作法。可是d3使用下面的方式來組織這種結構：

 

 

 

 

 

 

這樣call返回數據仍然是一個selection,符合d3的鏈式風格。

 

二分圖

實例：https://github.com/NPashaP/Viz

在https://github.com/NPashaP/Viz文件中（閱讀未進行壓縮的）的第一個圖就是，大概是370多行。推薦閱讀https://github.com/nelsonkuang/ant-admin/blob/master/src/utils/d3-viz.js

之後你們寫畫圖的時候，推薦使用這種結構。

關鍵點1：從數據到圖的數據。

1. rect的位置和大小

   注意：圖數據與實際圖形的對應，這裏做者，把rect的中心計算成x y,把rect的寬高的1/2記做width,height

   以下圖所示：

    

    

    

2. path(每一個彎曲的面積)

Return的形式： return ["M",x1,",",y1,"C",mx1,",",y1," ",mx1,",",y2,",",x2,",",y2,"L"
 ,x3,",",y3,"C",mx3,",",y3," ",mx3,",",y4,",",x4,",",y4,"z"].join(""); 

其中'M'（move to）,'C'(curveto)都是大寫的，表示絕對定位。(小寫的表示相對定位)。'Z'(closepath)從當前位置到起點畫一條直線閉合。

C表示三階貝塞爾曲線，參數爲三個點p1,p2,p3，p3是結束點，開始點p0與控制點p1控制前半段曲線的彎曲，控制點p2和結束點p3控制後半段曲線的彎曲。

如圖所示：

關鍵點2：從圖數據到圖形