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：从图数据到图形