d3
学习d3可视化技术
源码地址:
https://github.com/L1-Guogang/top/tree/d3
大都督老师
爱老婆不能只停留在口头上
展开
-
连续显示鼠标位置
效果:html页<!DOCTYPE html><head> <meta charset="UTF-8"> <script src="../js/d3.js"></script> <title>显示鼠标位置-示例4-1</title></head><body onload="makeDemo41()"><svg id="showMousePosition"原创 2021-04-22 17:15:35 · 95 阅读 · 0 评论 -
将元素插入选择集并对其进行排序
效果初始化鼠标 mouseenter 事件,插入新元素鼠标 click 事件,降序排序<!DOCTYPE html><head> <meta charset="UTF-8"> <script src="../js/d3.js"></script> <title>将元素插入选择集并对其进行排序-示例3-3</title></head><body onload="原创 2021-02-06 11:13:12 · 173 阅读 · 0 评论 -
更新数据集和图形
效果更新前:更新后:example3-2.ftl 页面<!DOCTYPE html><head> <meta charset="UTF-8"> <script src="../js/d3.js"></script> <title>更新数据集和图形-示例3-2</title></head><body onload="makeDemo32()"> <原创 2021-01-08 22:20:23 · 201 阅读 · 0 评论 -
使用新数据更新图表
效果更新之前的图点击操作,更新之后的图example3-1.ftl页面<!DOCTYPE html><head> <meta charset="UTF-8"> <script src="../js/d3.js"></script> <title>使用新数据更新图表-示例3-1</title></head><body onload="makeDemo31()"&g原创 2021-01-06 22:06:53 · 165 阅读 · 0 评论 -
绑定数据
data()方法说明该接受任意值或对象的数组,并尝试在该数组和当前选择集元素中建立一对一的对应关系。将数据绑定到选择集的方法(sel是一个选择集对象)原创 2021-01-06 21:42:45 · 117 阅读 · 0 评论 -
选择集
选择集的定义选择集是被封装到抽象Selection中的DOM元素的有序集合。抽象Selection提供了一个API来查询和修改它所包含的元素。Selection API是声明式的,并且支持方法的链式调用,因而无须遍历单个节点即可操作DOM树。创建选择集一般来说,通过对全局d3对象调用选择集方法从而获得最初的选择集实例。然后,你就可以在Selection实例上调用自带的方法来创建它的子集了创建选择集的全局方法从选择集中创建子选择集的方法(sel指选择集对象)...原创 2021-01-06 21:29:14 · 1624 阅读 · 0 评论 -
d3创建动画
效果图点击每一项进行颜色的切换:红色和黑色example2-8.ftl页面<!DOCTYPE html><head> <meta charset="UTF-8"> <script src="../js/d3.js"></script> <title>响应用户事件的动画-示例2-8</title></head><body onload="makeDemo28()">原创 2021-01-03 11:28:03 · 364 阅读 · 0 评论 -
用d3创建HTML元素
效果example2-7.ftl<!DOCTYPE html><head> <meta charset="UTF-8"> <script src="../js/d3.js"></script> <title>用D3创建HTML元素-示例2-7</title></head><body onload="makeDemo4()"></body><原创 2020-12-12 13:02:40 · 1410 阅读 · 0 评论 -
坐标轴 比例尺 数据集 不同类型的曲线
效果图数据集 examples-multiple.tsv 文件内容x y1 y21.0 0.001 0.633.0 0.003 0.844.0 0.024 0.564.5 0.054 0.224.6 0.062 0.155.0 0.100 0.086.0 0.176 0.208.0 0.198 0.719.0 0.199 0.65example2-5-2.ftl<!DOCTYPE html><head> <meta charset="UT原创 2020-11-28 19:51:04 · 492 阅读 · 0 评论 -
双数据集图表
效果图数据集examples-multiple.tsvx y1 y21.0 0.001 0.633.0 0.003 0.844.0 0.024 0.564.5 0.054 0.224.6 0.062 0.155.0 0.100 0.086.0 0.176 0.208.0 0.198 0.719.0 0.199 0.65example2-5.ftl<!DOCTYPE html><head> <meta charset="UTF-8">原创 2020-11-28 13:29:12 · 254 阅读 · 0 评论 -
单数据集图表
效果example2-1.ftl页面<!DOCTYPE html><head> <meta charset="UTF-8"> <script src="../js/d3.js"></script> <title>单数据集图表-示例2-1</title></head><body onload="makeDemo1()"> <svg id="demo1"原创 2020-11-22 11:19:27 · 230 阅读 · 1 评论 -
Fetch API cannot load file:///E:/d3/xxx.tsv. URL scheme must be “http“ or “https“ for CORS request.
报错如下:解决办法:报错原因:因为浏览器不能直接加载本地资源解决办法:1.创建一个Server服务器端,目录结构如下:2.检查资源加载方式是否正确,正确的加载方式如下:验证再次在浏览器中访问,结果正常加载资源,效果如下:...原创 2020-11-22 10:10:18 · 11699 阅读 · 3 评论 -
d3
D3提供了一种通过Web构建图形的便捷方式D3简化了创建动画和交互式图形的方式。D3是一个易学易用的框架,擅长做通用的DOM处理。D3是一种开放技术,用户通过它可以创造无限的可能性。最棒的D3应用永远在路上,你就是它的缔造者。...原创 2020-11-21 21:25:13 · 168 阅读 · 0 评论