玩转可视化
数据可视化
登楼痕
受尽寒苦而不厌,此乃修罗之道
展开
-
D3 力导图 实现节点最短路径搜索
直接上完整html代码:<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>图的最短路径搜索</title></head><body> <svg width="800" height="600"></svg> <script src="https://d3原创 2020-11-27 16:36:09 · 507 阅读 · 0 评论 -
d3.js图谱canvas导出为图片保存本地--兼容Chrome、火狐、IE
downloadImg() { // 将当前canvas转换为png图片var serializer = new XMLSerializer();var source = serializer.serializeToString(this.svg.node());source = '<?xml version="1.0" standalone="no"?>\r\n' + so...原创 2019-06-12 15:13:17 · 2538 阅读 · 3 评论 -
d3.js canvas无自适应导致窗口缩放时影响节点坐标获取
问题:例如引力图中,缩放浏览器窗口,canvas无自适应调整大小时,会导致点击node时无法正确获取到坐标,从而影响拖拽等操作。解决:对window进行监听,回调中重新设置画布的宽高function updateWindow(){ x = w.innerWidth || e.clientWidth || g.clientWidth; y = w.innerHeig...原创 2019-07-11 14:32:12 · 899 阅读 · 0 评论 -
canvas实现动态粒子鼠标互动连线背景效果
动态粒子连线背景实现:不支持IE,因为IE不支持requestAnimationFrame,需要用setInterval或者setTimeout模拟每一帧更新。<html> <head> <style> body{ margin:0; paddi...原创 2019-07-26 17:30:42 · 1484 阅读 · 0 评论 -
d3.js 画环形图和饼状图
利用d3.js中的pie生成器,加上arc弧https://github.com/d3/d3-shape/blob/v1.3.4/README.md#pies效果:代码:<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/htm...原创 2019-07-23 14:53:50 · 1831 阅读 · 0 评论 -
d3.js v4 Force官方API
d3的力导图运用了速度表示的韦尔莱算法。 d3.forceSimulation(nodes):使用指定的nodes数组创建一个新的simulation,但不含引力(with no forces)。如果未指定nodes,默认为空数组。模拟器会自动执行;使用simulation.on在模拟运行时监听tick事件。如果希望手动运行模拟,需要调用simulation.stop,然后根据需要调用sim...翻译 2019-08-14 10:19:27 · 2331 阅读 · 0 评论