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