数据可视化【免费下载链接】cytoscape.jsGraph theory (network) library for visualisation and analysis项目地址https://gitcode.com/gh_mirrors/cy/cytoscape.js点击查看免费下载本篇指南以 Cytoscape.js 官方文档 documentation/md/getting-started.md 为骨架系统讲解在 HTML、Node.js 及各类模块化工程中引入 Cytoscape.js 的完整方式、初始化图实例core的要点、container/elements/style/layout四项基础选项的配置方法并结合仓库源码与测试用例揭示其底层实现原理。读完本文你将能够独立搭建一个可交互的图可视化页面并理解cytoscape()工厂函数背后的初始化流程。Cytoscape.js 是一个用于图论网络建模与可视化的 JavaScript 库仓库描述为 Graph theory (network) library for visualisation and analysis。它的核心模型是一个 Cytoscape.js 实例core对应一张图。因此一切使用都始于两个动作——引入库、创建实例。一、引入 Cytoscape.js五种加载方式与构建产物对照1. 传统 HTML 环境script标签在不使用构建工具build system的简单 HTML 页面中直接用script标签引入即可script srccytoscape.min.js/script引入后全局变量cytoscape即可用。2. ES6 模块环境import语句在原生支持 ES 模块ESM的页面中可以将 Cytoscape.js 作为 ES6 模块导入script typemodule import cytoscape from ./cytoscape.esm.min.mjs; /script3. npm 安装推荐用于工程化项目npm install cytoscape安装后在 ESM 环境如 Webpack或使用esm包的 Node.js中import cytoscape from cytoscape;注意必须使用默认导出。以下写法不会生效import * as cytoscape from cytoscape; // wont work在 CommonJS 环境如原生 Node.js中使用requirevar cytoscape require(cytoscape);在 AMD / Require.js 环境下require([cytoscape], function(cytoscape){ // ... });4. Bower 与 Meteor 安装bower install cytoscapeMeteor/Atmosphere 环境同样通过 npm 安装npm install cytoscape5. CDN 引入无需本地安装时可使用内容分发网络CDN引入官方文档推荐 CDNJS、jsDelivr 与 Unpkg三者均以 npm 包名cytoscape提供dist/下的构建产物。官方文档特别提醒不要从文档页面直接引用hotlink文档自带的 Cytoscape.js 副本——那些文件仅供演示demos使用。构建产物一览五类文件分别何时用npm包内的构建产物位于dist/目录下当前仓库 dist/ 实际包含以下五个文件它们与官方文档的表格完全对应构建文件是否压缩模块系统说明cytoscape.min.js是UMD通用模块定义配合全局变量或require()使用生产环境首选cytoscape.umd.js否UMD配合全局变量或require()调试使用cytoscape.esm.min.mjs是ESMECMAScript 模块配合现代import/export即import cytoscape from cytoscapecytoscape.cjs.js否CJSCommonJS供 Node.js 或 Webpack 等打包器通过require(cytoscape)自动消费cytoscape.esm.mjs否ESM供 Node.js 或打包器通过import cytoscape from cytoscape自动消费也可手动用于调试 ESM 构建产物以上文件的消费映射在 package.json 中有精确的声明main指向dist/cytoscape.cjs.jsmodule指向dist/cytoscape.esm.mjsexports字段则进一步细分了import、require两种条件导出并提供了unpkg与jsdelivr字段均指向dist/cytoscape.min.js供两大 CDN 直接使用。浏览器与运行时兼容性Cytoscape.js 支持 ES5 及更新版本的环境源码经 Babel 转译且只使用标准库的基础特性对于可提升性能的可选特性则采用特性检测feature detection而非硬性要求。若未来版本需要更新的标准库能力官方建议在需要兼容旧浏览器的场景中引入core-js等 polyfill。二、初始化前的关键一步容器与 CSS 顺序官方文档特别强调Cytoscape.js 在初始化时会读取你的 HTML DOM 容器元素的尺寸用于布局layout计算与渲染。因此必须把 CSS 样式表放在head中、位于任何 Cytoscape.js 相关代码之前。否则容器尺寸可能被间歇性地错误报告导致布局与渲染出现非预期行为。假设容器 DOM 元素的 ID 为cy样式表应包含类似如下的内容#cy { width: 300px; height: 300px; display: block; }从源码实现看这一要求确实至关重要在 src/core/index.mjs 的构造函数中库会根据「是否存在容器且非 headless」来决定默认的布局与渲染器有头模式默认grid布局 canvas渲染器无头模式默认null布局 null渲染器而 grid.mjs 等布局算法会以cy.width()/cy.height()作为默认包围盒来计算格子行列数——容器尺寸若在初始化时刻尚未生效图的初始布局就会出错。三、创建第一个图实例cytoscape()工厂函数与初始化流程一个 Cytoscape.js 实例对应一张图创建方式如下var cy cytoscape({ container: document.getElementById(cy) // container to render in });container也可以传入一个 jQuery 实例库会自动解包var cy cytoscape({ container: $(#cy) });从源码看container的解包逻辑位于 src/core/index.mjs当传入对象不是 HTML 元素、但其[0]是 HTML 元素时典型的 jQuery 包装对象特征即取container[0]作为真实容器。同时构造函数还维护了容器与实例的注册表_cyreg如果同一个容器上已存在旧实例会先将其destroy()再替换避免重复初始化见 src/core/index.mjs。headless无头模式如果你在 Node.js 中运行 Cytoscape.js或需要在无 DOM 的环境下运行则不要指定container选项。在 Node.js 这类隐式无头环境中实例会自动处于 headless 状态若想在浏览器中显式运行无头实例可设置options.headless为true。入口函数cytoscape(options)定义在 src/index.mjs当传入普通对象时创建new Core(options)返回图实例当传入字符串时则走扩展注册路径。此外还暴露了cytoscape.use()注册第三方扩展、cytoscape.warnings()开关警告、cytoscape.version、cytoscape.stylesheet等公共 API。四、基础选项container、elements、style、layout 一图起手用于可视化时通常应设置四个选项container渲染容器、elements图元素、style样式表、layout布局算法。官方入门文档给出了一个完整的「两节点一节点」最小可运行示例var cy cytoscape({ container: document.getElementById(cy), // container to render in elements: [ // list of graph elements to start with { // node a data: { id: a } }, { // node b data: { id: b } }, { // edge ab data: { id: ab, source: a, target: b } } ], style: [ // the stylesheet for the graph { selector: node, style: { background-color: #666, label: data(id) } }, { selector: edge, style: { width: 3, line-color: #ccc, target-arrow-color: #ccc, target-arrow-shape: triangle, curve-style: bezier } } ], layout: { name: grid, rows: 1 } });elements元素的 JSON 格式elements接受两种格式扁平数组直接列出所有节点与边如上例所示。边通过data中的source/target字段引用节点 id节点通过data.id唯一标识groupnodes/edges字段可以省略库会自动推断显式指定则可在初始化错误时获得更友好的调试信息。按分组键值group-keyed{ nodes: [...], edges: [...] }例如cytoscape({ container: document.getElementById(cy), elements: { nodes: [ { data: { id: a } }, { data: { id: b } } ], edges: [ { data: { id: ab, source: a, target: b } } ] }, layout: { name: grid, rows: 1 }, style: [ { selector: node, style: { label: data(id) } } ] });elements除data外还可携带position/renderedPosition初始位置、scratch临时数据、selected、selectable、locked、grabbable、pannable、classes等字段每个元素的完整 JSON 字段说明见文档 documentation/md/notation.md 的 Elements JSON 一节。style选择器驱动的样式表style是一组{ selector, style }规则组成的数组selector使用 Cytoscape.js 选择器语法如node、edge、#astyle中的键为属性名如background-color、label、curve-style值可为常量或data(...)等映射函数。完整样式属性与选择器语法参见 documentation/md/style.md。layout初始布局算法layout指定初始布局name为布局名称。源码中内置布局位于 src/extensions/layout/包括grid、circle、concentric、breadthfirst、cose、preset、random、null等。以官方示例使用的grid布局为例其完整参数定义于 grid.mjs可在layout对象中按需覆盖参数默认值说明fittrue布局完成后是否让视口适配整个图padding30适配时使用的内边距boundingBoxundefined约束布局范围的包围盒{ x1, y1, x2, y2 }或{ x1, y1, w, h }avoidOverlaptrue是否避免节点重叠空间不足时可能溢出包围盒avoidOverlapPadding10启用avoidOverlap时节点间的额外间距rows/cols自动强制指定网格行数/列数只给其一另一方按节点数自动计算spacingFactorundefined对整个布局区域施加的乘法缩放因子0condensefalsefalse用满可用空间true使用最小空间position无自定义函数function(node){ return {row, col}; }按行/列手动指定节点位置sortundefined排序函数如function(a, b){ return a.data(weight) - b.data(weight); }animatefalse是否以动画过渡到目标位置animationDuration500动画时长毫秒ready/stopundefined布局layoutready/layoutstop事件回调从 grid.mjs 的源码可知rows与cols都指定时直接采用只指定rows时cols ceil(cells / rows)只指定cols或兼容写法columns时rows ceil(cells / cols)两者都不指定则根据包围盒宽高比与节点数自动推导行列数。官方示例中rows: 1的语义即「所有节点排成一行」。五、初始化背后的实现原理Core 构造流程理解了配置项再来看cytoscape()创建实例时实际发生了什么。核心逻辑集中在 src/core/index.mjs 的Core构造函数选项归一化opts util.extend({}, opts)浅拷贝传入选项解包 jQuery 容器。有头/无头判定与默认值注入src/core/index.mjshead window 存在 有 container !opts.headless有头时默认layout: { name: grid }、renderer: { name: canvas }无头时默认null布局与渲染器。初始化内部状态src/core/index.mjs创建元素集合、事件监听器列表、动画队列并以defVal函数合并zoomingEnabled、panningEnabled、boxSelectionEnabled、autolock、autoungrabify、autounselectify、styleEnabled、minZoom/maxZoom、初始zoom/pan等默认值默认zoom: 1、pan: { x: 0, y: 0 }、缩放范围[1e-50, 1e50]。加载外部数据src/core/index.mjsstyle与elements既可以是普通对象/数组也可以是 Promise——源码通过is.promise检测并合并等待对应测试见 test/core-init.mjs。设置默认样式并初始化渲染器启用样式时先cy.setStyle([])加载默认样式表再以合并后的选项创建渲染器。初始元素与布局setElesAndLayout移除旧元素 →cy.add(elements)→ 以options.layout合并出布局选项并cy.layout(layoutOpts).run()随后依次触发layoutready、load、layoutstop、done事件并在ready时启动动画循环、绑定options.ready回调与预先注册的readies处理器、最终emit(ready)。值得注意的是 test/core-init.mjs 中的一条测试初始化时后出现的重复 id 节点不会覆盖先前节点cy.elements().size()保持 2$(#n1)的数据仍为第一个这说明 id 是元素的唯一标识初始化时会去重。此外测试还验证了空图可正常加载、source/target指向不存在节点时边的创建会抛错、图级data可加载、minZoom/maxZoom可被正确设置等初始化行为。六、下一步进入 Core API完成上面的步骤后你就拥有一个带基础选项的 core图实例了。Core 是进入 Cytoscape.js 全部功能的入口从 Core 可以运行布局、调整视口缩放/平移、增删元素、导出图片、绑定事件等。Core 的所有能力通过模块拆分注入到corefn见 src/core/index.mjs 的模块清单addRemove、animation、events、exportFormat、layout、notification、renderer、search、style、viewport、data。Core API 的逐项文档位于 documentation/md/core/元素集合collectionAPI 文档位于 documentation/md/collection/布局文档位于 documentation/md/layouts/动画与事件分别见 documentation/md/animations.md 与 documentation/md/events.md。也可以结合仓库中的真实示例快速上手官方演示代码位于 documentation/demos/如circle-layout、grid-layout、cose-layout、compound-nodes等每个 demo 目录都包含index.html、code.js、style.css调试用的交互页面见 debug/index.html。最后如果遇到使用问题可以参考社区提问渠道官方文档建议到 Stack Overflow 提问并添加cytoscape.js标签。现在打开编辑器创建你的第一个index.html把第二节的 CSS 与第四节的初始化代码组合起来即可看到一张可缩放、可平移、可拖拽节点的交互图。赞分享数据可视化【免费下载链接】cytoscape.jsGraph theory (network) library for visualisation and analysis项目地址https://gitcode.com/gh_mirrors/cy/cytoscape.js点击查看免费下载相关推荐Egg 快速入门实战指南从脚手架初始化到 HackerNews 完整应用Egg 快速入门实战指南从脚手架初始化到 HackerNews 完整应用 本篇指南基于 Egg 官方 Quick Start 文档展开面向想要在 Node.后端Web框架深入解析ASP.NET Boilerplate初始化从模块加载到依赖注入的完整指南 深入解析ASP.NET Boilerplate初始化从模块加载到依赖注入的完整指南 ASP.NET Boilerplate是一个功能强大的开源框架专门后端Web框架依赖注入认证鉴权Fashion-MNIST完整入门指南从数据加载到模型实战Fashion MNIST完整入门指南从数据加载到模型实战 Fashion MNIST作为机器学习领域最受欢迎的时尚图像数据集已成为深度学习算法基准测试的重数据集机器学习深度学习创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考