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

原文地址:https://www.cnblogs.com/xunhanliu/p/10478127.html