核心操作: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:从数据到图的数据。
-
rect的位置和大小
注意:图数据与实际图形的对应,这里作者,把rect的中心计算成x y,把rect的宽高的1/2记作width,height
如下图所示:
- 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控制后半段曲线的弯曲。
如图所示: