格子越深,表示该主题在这项指标上越高。
清晰60
说服55
密度90
制作成本75
作业适配58
工作适配70
低高
简短问答
什么时候选网络图?
故事符合「组织影响力图、依赖图、课堂社交图」时选用。
什么时候避开?
遇到「一个简单的组织结构图或项目符号列表就已经包含了这一主张」就换形式。
谁发明或推广了它?
力导向布局; Cytoscape.js 和 GitHub 上的朋友
它编码什么?
具有强制或分层布局的节点和边
广告能用吗?
在微信、抖音与展示广告里主张能一眼看见就可以;否则把图放在落地页。
老师会收吗?
实验报告与展板里有轴、单位、来源一行就可以。
网络图把值编码为具有强制或分层布局的节点和边。力导向布局; Cytoscape.js 和 GitHub 上的朋友。
工作报告、广告与作业中适合「组织影响力图、依赖图、课堂社交图」。若「一个简单的组织结构图或项目符号列表就已经包含了这一主张」,换一种形式。
软件
- Cytoscape.js — 用于浏览器的图论工具包 - MIT。 · MIT · github.com/cytoscape/cytoscape.js
- force-graph — 力导向的画布,几乎没有样板。 · MIT · github.com/vasturiano/force-graph
- d3-force — 许多自定义网络视图下使用的物理学。 · ISC · github.com/d3/d3-force
- Mermaid flowchart — 不需要交互时的文本图表。 · MIT · github.com/mermaid-js/mermaid
- Mind-map demo — 静态径向关系教学标记。 · CC0 examples · github.com/Tool-Lifes/viz-atlas
导出
- 导出 1 — SVG
- 导出 2 — PDF
- 导出 3 — 把 EMF/SVG 放进幻灯(不要截图)
- 导出 4 — 网页用 SVG,印刷用 PDF
无障碍
- 无障碍 1 — 不要只靠色相。叠上纹理、标签和位置。
- 无障碍 2 — 正文对比 4.5:1,大标记 3:1。
- 无障碍 3 — 图上写短替代文本。数字也做成 HTML 表。
- 无障碍 4 — 动效只用于强调。尊重 prefers-reduced-motion。
网络图:守住具有强制或分层布局的节点和边,「一个简单的组织结构图或项目符号列表就已经包含了这一主张」时换图。