精通d3js
文章平均质量分 78
ddddot
这个作者很懒,什么都没留下…
展开
-
d3.js学习笔记-10(布局:树状图、集群图捆、捆图)
d3.js学习笔记-09目录d3.js学习笔记-091 树状图References1 树状图在区域内按规则布置节点,再用连线将节点连接起来,最终的图表形似一颗树杆d3.layout.tree():创建一个树状图布局tree.size([width, height]):设定或获取尺寸,参数size是只有两个元素的数组,分别表示宽和高。tree.nodeSize([nodeSize]):设定或获取各节点的大小,以数组的形式:[x,y]tree.value([value]):设定或获取值访问器,原创 2020-09-15 14:10:42 · 2005 阅读 · 0 评论 -
d3.js学习笔记-09(布局:饼图、力导向图、弦图)
d3.js学习笔记-09目录d3.js学习笔记-091 饼状图(Pie)1.1 确定初始数据1.2 数据转换1.3 绘制2 力导向图(force)3 弦图(chord)ReferencesD3的12种布局:饼状图、力导向图、弦图、树状图、集群图、捆图、打包图、直方图、分区图、堆栈图、矩阵树图、层级图【不可直接使用】布局的使用顺序:确定初始数据—>转换数据—>绘制1 饼状图(Pie)d3.layout.pie():创建一个饼状图布局。pie(values[, index]):转换数据原创 2020-09-14 21:52:32 · 1991 阅读 · 2 评论 -
d3.js学习笔记-08(导入和导出)
d3.js学习笔记-09目录d3.js学习笔记-091 json文件1.1 json数据格式1.2 读取json文件References1 json文件1.1 json数据格式1.2 读取json文件example.json:需要读取的json文件的地址d3.json("example.json", function(erroe, data){ console.log(data)})References[1] 吕之华.精通D3.js:交互式数据可视化高级编程[M].北京:原创 2020-09-13 15:52:32 · 1426 阅读 · 0 评论 -
d3.js学习笔记-07(交互)
d3.js学习笔记-07目录d3.js学习笔记-071 交互基础1.1 鼠标的事件1.2 键盘的事件1.3 触屏2 事件3 行为3.1 拖拽References1 交互基础与图表进行交互,指子啊图形元素上设置一个或者多个监听器,当事件发生时,做出相应的反应。1.1 鼠标的事件click:鼠标单击某元素。mouseover:光标放在某元素上。mouseout:光标从某元素上移出来时。mousemove:鼠标被移动的时候。mousedown:鼠标按钮被按下。mouseup:鼠标按钮被松开原创 2020-09-12 14:07:43 · 956 阅读 · 0 评论 -
d3.js学习笔记-06(动画)
d3.js学习笔记-05目录d3.js学习笔记-051 过渡1.1 启动过渡1.2 过渡的属性1.3 子元素References1 过渡过渡是一种动态效果,从初始状态转向目的状态1.1 启动过渡d3.transition([selection],[name]):创建一个过渡对象,参数为选择集;一般使用d3.select("rect").transition()格式,可多次调用产生多种过渡transition.delay([delay]):设置延迟时间,过渡会经过一定时间后才开始发生,单位是毫原创 2020-09-11 14:12:25 · 680 阅读 · 0 评论 -
d3.js学习笔记-05(颜色、路径生成器)
d3.js学习笔记-05目录d3.js学习笔记-051. 颜色1.1 RGB1.2 HSL1.3 颜色插值2. 线段生成器2.1 生成线段方式汇总2.2 线段生成器3 区域生成器4 弧生成器5 符号生成器6 弦生成器7 对角线生成器References1. 颜色1.1 RGBRGB色彩模式通过叠加红绿蓝三个颜色通道得到各种颜色d3.rgb(r,g,b):使用r、g、b值来创建颜色,范围都为[0,255]。d3.rgb(color):输入字符串来创建颜色,例如:"#ffeeaa“或缩写"#fe原创 2020-09-08 19:19:11 · 1109 阅读 · 0 评论 -
d3.js学习笔记-04(比例尺、坐标轴)
d3.js学习笔记-02目录d3.js学习笔记-021. 比例尺1.1 定量比例尺(连续)1.1 线性比例尺1.2 指数、对数比例尺1.3 量子、分位比例尺References1. 比例尺1.1 定量比例尺(连续)每个比例尺都需要指定定义域(domain)和值域(range)1.1 线性比例尺d3.scale.linear():创建线性比例尺linear(x):输入一个在定义域内的值x,返回值域内对应的值。linear.invert(y):输入一个在值域内的值,返回定义域内对应的值。l原创 2020-09-07 20:05:23 · 910 阅读 · 0 评论 -
d3.js学习笔记-03(处理选择集、数组)
d3.js学习笔记-02目录d3.js学习笔记-021. 绑定数据1.1 datum()1.2 data()1.3 data()绑定数据的顺序2 enter、exit和update2.1 enter:添加元素2.2 exit:删除元素2.3 统一处理的模板2.4 过滤器:selection.filter()2.5 选择集顺序:selection.sort()/d3.ascending2.6 each()2.7 call()3 数组处理3.1 排序3.2 求值3.3 操作数组3.4 映射(一种数据结构)3.原创 2020-09-04 20:18:49 · 876 阅读 · 0 评论 -
d3.js学习笔记-02(选择集)
d3.js学习笔记-02目录d3.js学习笔记-021. 选择元素1.1 select1.2 selectAll2 选择集(selection)2.1 查看选择集状态2.2 设置/获取属性selection.attr()selection.classed()selection.style()selection.property()selection.text()selection.html()2.3 插入、删除、添加元素selection.insert()selection.remove()selecti原创 2020-09-04 00:41:07 · 238 阅读 · 0 评论