随笔分类 -  D3

D3——Updates, Transitions, and Motion
摘要：前面的直方图使用的数据都是static datasets, 但现实世界中数据大多都是随时间变化的。有时我们希望图表能反映那些变化。在D3中，通过updates可以更新数据，changes可视化可以通过transitions,motion表现出来 有序的数据(ordinal data: typical 阅读全文
posted @ 2017-09-20 17:44 pei~乐悠悠 阅读(282) 评论(0) 推荐(0)
SVG中的元素属性
摘要：SVG attributes by category Animation event attributes onbegin, onend, onload, onrepeat Animation attribute target attributes attributeType, attributeN 阅读全文
posted @ 2017-09-20 16:22 pei~乐悠悠 阅读(1171) 评论(0) 推荐(0)
D3——Axes
摘要：使用d3.svg.axis() 创建一个 axis function: an axis function is called, it doesn’t return a value, but generates the visual elements of the axis, including li 阅读全文
posted @ 2017-09-20 15:01 pei~乐悠悠 阅读(379) 评论(0) 推荐(0)
D3——scale
摘要：d3.scale 比例尺 “Scales are functions that map from an input domain to an output range” Domains 定义域 和 Ranges 值域 创建线性比例尺 d3.max()和d3.min() 设置动态比例尺 设置圆心和la 阅读全文
posted @ 2017-09-15 18:28 pei~乐悠悠 阅读(1425) 评论(0) 推荐(0)
D3——散点图Scatterplot
摘要：散点图 添加labels 阅读全文
posted @ 2017-09-15 17:32 pei~乐悠悠 阅读(1043) 评论(0) 推荐(0)
D3——绘制SVG图形-直方图
摘要：1、创建SVG元素 2、为SVG元素设置属性 或： 或： 画圆实践 Bar Chart 根据div画chart 根据Rect画Chart 添加Lable: 改变Label显示位置 设置属性 利用上面的方式计算label的位置，有时并不能很好的适应对应的bar，例如第一个label 5的位置，可以使用 阅读全文
posted @ 2017-09-15 16:27 pei~乐悠悠 阅读(2651) 评论(0) 推荐(0)
D3——根据数据画图
摘要：为DOM元素添加class Drawing Bars: Setting Styles 优化一下 阅读全文
posted @ 2017-09-15 15:57 pei~乐悠悠 阅读(584) 评论(0) 推荐(0)
D3——动态绑定数据
摘要：一、绑定数组元素 d3.select("body")：选择body .selectAll("p")： 选择body中的所有p元素，此时还没有创建p元素, 因此this returns an empty selection. .data(dataset)： 统计并分析数据元素，dataset中有5个元 阅读全文
posted @ 2017-09-15 15:41 pei~乐悠悠 阅读(1674) 评论(0) 推荐(0)
D3——基本知识点
摘要：选择器： d3.select - 从当前文档中选择一个元素 d3.selectAll - 从当前文档中选择多个元素 selection.append - 创建并追加一个新元素 selection.attr - 取得或设置属性的值 selection.classed - 添加或移除CSS类 selec 阅读全文
posted @ 2017-09-15 14:52 pei~乐悠悠 阅读(1001) 评论(0) 推荐(1)
SVG基本图形
摘要：SVG 是使用 XML 来描述二维图形和绘图程序的语言 SVG 指可伸缩矢量图形 (Scalable Vector Graphics) SVG 用来定义用于网络的基于矢量的图形 SVG 使用 XML 格式定义图形 SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失 SVG 是万维网联盟的标准 阅读全文
posted @ 2017-09-15 12:26 pei~乐悠悠 阅读(1937) 评论(0) 推荐(0)