D3.js
关注
分享
扫一扫
文章平均质量分 52
D3 是最流行的可视化库之一，它被很多其他的表格插件所使用。它允许绑定任意数据到DOM，然后将数据驱动转换应用到Document中。你可以使用它用一个数组创建基本的HTML表格，或是利用它的流体过度和交互，用相似的数据创建惊人的SVG条形图
Martian_小小
这个作者很懒，什么都没留下…
展开
-
d3.js学习笔记（七）-----饼图布局
饼图布局一、转换数据集转换后数据集变为：把数值数组转换成了对象的数组二、生成路径任何不是矩形、圆形或其他基本形状的图形都可以用path来绘制这里用 d3.arc() 生成路径三、准备分组为每个要绘制的扇形创建分组（g），把用于生成饼图的数据绑定到这些新元素，并把每个分组平移到图表中心每个g元素，都追加path元素。路径的相关属性的值都保存在元素d中，所以这里调用arc四、文本标签arc.centroid() 负责计算并返回任何弧线的中心点源代码：<!DOCTYPE原创 2021-02-08 17:05:00 · 349 阅读 · 0 评论 -
d3.js学习笔记（六）----- 条形图元素的删除
条形图元素的删除一、准备数据var dataset=[{ key:0,value:42},{ key:1,value:21}…]二、更新引用d --> d.value三、键函数四、从数据集中删除一个元素dataset.shift()五、退出过渡源代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewpo原创 2021-02-05 13:59:16 · 432 阅读 · 1 评论 -
d3.js学习笔记（五）------散点图的更新（数轴）
散点图的更新一、创建x轴 y轴二、更新x轴 y轴三、在过渡开始和结束时执行的操作格式：. on(“start”,function(){ … }). on(“end”,function(){ … })要点：1、. on(“start”,function(){ … })中一定不能添加 transition ，否则会覆盖掉外面的transition效果2、. on(“end”,function(){ … })中可以使用transition 效果四、剪切路径（蒙版）超出蒙版外的像素不会显原创 2021-02-05 13:07:07 · 544 阅读 · 0 评论 -
d3.js学习笔记（四）-----更新后的柱状图（更新、过渡和动画）
d3学习之更新、过渡、动画和序数比例尺一、序数比例尺以一定的顺序（从左到右）展示，且均匀分布序数比例尺的输入值域通常是要指定一个包含类别名的数组，没有明确的类别时，可以给每个数据点或者条形分配一个对应其在数据集中位置的id值连续生成数值数组的方法：d3.range（）eg：d3.range（10）生成数组：[0,1,2,3,4,5,6,7,8,9].rangeRound([0,w]) 根据输入值域的长度会自动分档，切分成相等的“块”.paddingInner(0.05) 设置档间距， 0.0原创 2021-02-04 13:42:06 · 804 阅读 · 0 评论 -
d3.js学习笔记（三）------散点图（添加了数轴）
添加了数轴的散点图要点：1、定义数轴时是用 d3.axisBottom()、 d3.axisLeft()2、数轴是要基于比例尺工作，所以必须调用 .scale(比例尺)3、ticks() 是用来定义刻度线的数量，但只是粗略设置刻度线的数量，d3 会更精确的确定具体采用几根刻度线4、svg.append(“g”)g是分组元素：1）为组织其他元素；2）对整个分组应用变换，从而影响该组中所有元素5、添加数轴，必须调用定义的数轴函数具体代码如下：<!DOCTYPE html><原创 2021-02-03 22:33:47 · 487 阅读 · 0 评论 -
d3.js学习笔记（二）------散点图的显示（比例尺）
d3.js之散点图步骤：1、创建 svg2、在 svg 中创建数据点 circle3、用比例尺设置数据点的参数，（注意：给比例尺的范围要添加边距，不然有些点会溢出，无法完整显示）4、添加文本<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initia原创 2021-02-03 11:51:53 · 380 阅读 · 0 评论 -
d3.js学习笔记（一）-----柱状图的显示
d3.js之柱状图的显示步骤：1、添加 svg （注意：此步不需要用.enter()来给DOM元素占位，用了.enter()会出错）2、在 svg 中添加 rect 矩形条，（注意：矩形条之间要有间距，且需要用.enter()来给 rect 元素占位）3、给矩形条添加文本具体代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta nam原创 2021-02-03 10:34:48 · 485 阅读 · 1 评论