数据可视化【免费下载链接】cytoscape.jsGraph theory (network) library for visualisation and analysis项目地址https://gitcode.com/gh_mirrors/cy/cytoscape.js点击查看免费下载cy.style()是 Cytoscape.js 中用于在初始化之后读写整张图视觉样式stylesheet的核心 API。本文以官方文档 documentation/md/core/style.md 为主体结合仓库源码src/core/style.mjs、src/style/index.mjs 等深入剖析其底层实现系统讲解如何通过字符串、JSON、链式调用三种方式设置样式、如何在现有样式上追加与合并规则、如何序列化导出当前样式以及这些操作背后的解析、匹配与更新机制。读完本文你将掌握在运行时动态切换主题、按数据批量改样式、导出/导入样式配置的完整实战方案。一、cy.style()是什么获取与设置样式的大门cy.style()是 Cytoscape.js 暴露在核心core对象上的方法用于在初始化之后访问或替换整张图的视觉样式表。这在以下场景中尤其有用运行时切换整套主题如亮色/暗色模式根据用户操作或数据变化动态重绘样式从服务器拉取样式文件后应用导出当前样式供持久化或分享。从源码看src/core/style.mjs 中的实现非常简洁当传入newStyle时会调用setStyle()重建样式并立即调用s.update()让新样式应用到所有元素当不传参数时直接返回当前样式对象style: function( newStyle ){ if( newStyle ){ let s this.setStyle( newStyle ); s.update(); } return this._private.style; }而setStyle()src/core/style.mjs会根据传入值的类型分派到不同的构造路径这决定了cy.style()支持的三种输入形态传入类型底层处理适用场景stylesheet 对象cytoscape.stylesheet()产物style.generateStyle( this )链式编程、可复用样式模板数组plain JSONStyle.fromJson( this, style )从服务器拉取 JSON 样式字符串Style.fromString( this, style )从外部样式文件加载其他/未传Style( this )返回现有样式读取当前样式需要注意cy.style( newStyle )传入新样式后会替换整张图当前的样式对象而非追加而原样式中的 bypass 属性等会被清理重建。二、直接按引用设置新样式最简单的用法是直接给cy.style()传一个完整的样式定义。官方文档给出的示例中三种格式都支持// 字符串样式表也可使用 json 数组或 cytoscape.stylesheet() 对象 var stringStylesheet node { background-color: cyan; }; cy.style( stringStylesheet );字符串格式对应源码中的Style.fromString()src/style/string-sheet.mjs其内部会先resetToDefault()再appendFromString()JSON 数组格式对应Style.fromJson()src/style/json.mjs同样先重置为默认样式再逐条追加。也就是说这两种快捷方式都以默认样式表为基底你提供的规则会叠加在默认规则之上。关于这三种格式的完整定义可参见样式参考文档 documentation/md/style.md其要点如下字符串格式形如node { background-color: green; }每条属性末尾的分号是必须的最后一条除外支持/* 注释 */JSON 格式形如[{ selector: node, style: { background-color: red } }]属性名也可用css键代替style函数格式cytoscape.stylesheet().selector(node).style({...})适合在代码中动态构建。三、链式 API逐步重建样式表cy.style()返回的样式对象本身支持链式调用官方文档展示了两种从零开始构建样式的方式。3.1resetToDefault()以默认样式为基底重建cy.style() .resetToDefault() // 以一份全新的默认样式表开始 // 然后定义新样式 .selector(node) .style(background-color, magenta) // ... .update() // 标记样式表构建结束使其更新到元素上 ;resetToDefault()在源码中src/style/index.mjs等价于先clear()再addDefaultStylesheet()。默认样式表的内容定义在 src/style/properties.mjs它包含了:parent父节点矩形外观、edge线宽 3、:loopbezier 曲线、:selected蓝色高亮和:active拖拽时的黑色半透明遮罩等内置规则。3.2clear()完全清空连默认样式也不要cy.style() .clear() // 清空样式表连默认样式也不保留 // 为 node 定义所有基础样式 .selector(node) .style(background-color, magenta) // 为 edge 定义所有基础样式 .selector(edge) .style({ width: 3, line-color: yellow }) // ... .update() ;使用clear()后没有任何默认样式兜底因此必须为所有可见元素提供完整的视觉属性否则元素可能不可见或不满足预期。从源码看clear()src/style/index.mjs会清空所有 context、重置内部缓存并将所有元素的styleDirty标记为true以便后续重算。3.3selector()与.style()定义规则链式 API 的核心是selector( selectorStr )和style( name, value )style是css的别名见 src/style/index.mjsselector()创建一个新的样式上下文selector 字符串遵循 documentation/md/selectors.md 中定义的语法如node、edge、#id、.class、[dataField]、:selected等也支持core这个特殊 selector 用于设置全局 UI 属性.style()接受(name, value)或(map)两种参数形式其中 map 形式支持连字符kebab-case与驼峰camelCase两种属性名写法底层通过util.dash2camel()做归一化src/style/index.mjs。选择器匹配与属性级联的实现位于 src/style/apply.mjs每个元素会与所有上下文做匹配生成一个由t/f组成的上下文键getContextMeta见 src/style/apply.mjs再按上下文键缓存计算出的样式。正如 documentation/md/style.md 开头强调的样式中完全忽略 CSS 特异性规则对同一元素的同一属性最后匹配的选择器生效。四、在现有样式上追加与合并如果不想重建整张样式表而是希望在已有样式基础上增量添加规则可以使用以下三种方式。4.1selector().style()追加cy.style() .selector(node) .style({ background-color: yellow }) .update() // 标记样式表构建结束使其更新到元素上 ;注意这里没有调用clear()或resetToDefault()所以新规则直接追加到现有样式表末尾。由于最后匹配者生效后追加的node规则会覆盖前面同 selector 的同名属性。4.2append()追加字符串/JSONcy.style() .append(node { background-color: yellow; }) .update();append()是一个多态方法src/style/index.mjs它会根据传入类型分派stylesheet 对象 →appendToStyle()数组 →appendFromJson()字符串 →appendFromString()与fromString()/fromJson()的关键区别是append()系列不会先resetToDefault()因此不会清空已有规则。在 src/style/string-sheet.mjs 中可以看到字符串解析器会先剥离/* ... */注释再逐块匹配selector { prop: value; }遇到无效选择器或属性会通过util.warn()发出警告并跳过而不是中断解析。4.3fromJson()/fromString()整体替换cy.style() .fromJson([ { selector: node, style: { background-color: red } } // , ... ]) .update() ;cy.style() .fromString(node { background-color: blue; }) .update() // 用新样式更新图中的元素 ;从 src/style/json.mjs 和 src/style/string-sheet.mjs 的源码可见fromJson()/fromString()都先调用resetToDefault()再追加传入内容因此它们等价于cy.style( jsonOrString )的直接赋值行为保留默认样式基底替换所有自定义规则。五、读取当前样式.json()序列化样式对象还提供了json()方法用于获取当前样式的 JSON 表示var styleJson cy.style().json(); var serializedJson JSON.stringify( styleJson );json()的实现见 src/style/json.mjs它会从defaultLength默认样式表条数之后开始遍历自定义上下文为每个上下文输出{ selector, style: { propName: strValue } }。也就是说序列化结果只包含自定义规则不含内置默认规则selector 为core时输出core字符串。这样序列化得到的 JSON 可以直接通过fromJson()或初始化时的style配置项恢复实现样式的导出/导入闭环。需要留意的是如果样式中使用了函数值function mapper将无法被序列化为 JSON 并正确反序列化详见下文第六节。六、样式的三种输入格式与函数值6.1 三种格式回顾documentation/md/style.md 的 Format 一节指出初始化时core/initialisation 之外样式的指定格式与运行时一致共有三种字符串格式适合从服务器通过 AJAX 拉取cytoscape({ container: document.getElementById(cy), style: node { background-color: green; } // 通常经 ajax 加载而非硬编码 });纯 JSON 格式cytoscape({ container: document.getElementById(cy), style: [ { selector: node, style: { background-color: red } } ] });函数链式格式cytoscape({ container: document.getElementById(cy), style: cytoscape.stylesheet() .selector(node) .style({ background-color: blue }) });cytoscape.stylesheet()返回的是一个哑样式表对象定义于 src/stylesheet.mjs它不持有 core 引用只是暂存 selector 与属性真正初始化时才通过generateStyle( cy )见 src/stylesheet.mjs解析为正式的 Style 对象。此外css可替代style使用如.selector(...).css(...)或{ selector: ..., css: ... }。6.2 函数值function values在 JSON 与链式函数格式中允许把函数作为属性值实现按元素动态计算样式cytoscape({ container: document.getElementById(cy), style: cytoscape.stylesheet() .selector(node) .style({ background-color: function( ele ){ return ele.data(bg); } // 等价写法background-color: data(bg) }) });documentation/md/style.md 对函数值有明确约束这些约束在源码 src/style/apply.mjs 的types.fn分支中亦有体现应为 selector 块覆盖的所有元素返回合法值应使用纯函数只依赖ele.data()、ele.scratch()或可用选择器表达的基础状态如ele.selected()不应读取其他样式值也不应修改 cy 或任何 ele 的图状态不应制造循环依赖函数内不要调用ele.style()、ele.numericStyle()等函数返回null或非法值会触发警告并回退到已有样式见 src/style/apply.mjs 的util.warn函数值无法被序列化为 JSONjson()只输出strValue。由于函数值无法利用内置的样式性能优化官方建议在可能的情况下优先使用内置 mapper 与选择器若必须使用函数可考虑配合缓存如 lodash 的_.memoize()。七、Mapper让样式跟随数据除了函数值cy.style()支持的另一类动态取值机制是内置 mapper官方文档中定义在 documentation/md/style.md 的 Mappers 一节核心有data()直接映射到元素数据字段如data(descr)等价于ele.data(descr)常用于label等文本类属性mapData()线性映射如mapData(weight, 0, 100, blue, red)将 0~100 的weight值映射到蓝到红的颜色区间超出区间的值钳制到端点值weight -1也映射为 bluefunction( ele )自定义函数见上文。这些 mapper 的底层解析正则定义于 src/style/properties.mjs例如data(prefix)形如data(\s*([\w\.])\s*)$mapData则要求(字段, 最小值, 最大值, 起始值, 终止值)五参数形式。实际求值时src/style/apply.mjsmapData按percent (fieldVal - fieldMin) / (fieldMax - fieldMin)归一化并钳制到 [0, 1]颜色属性在 RGBA 通道上做线性插值数值属性直接线性插值data直接读取字段值并按属性类型重新解析字段不存在或非数值时打印util.warn并跳过。使用 mapper 时有一条重要注意事项如果只对部分元素定义了映射所需的数据应使用选择器如[foo]把映射规则限定到有该数据的元素上避免其他元素因缺数据而回退到默认样式。八、样式属性体系与默认值cy.style()能设置的属性由样式属性注册表决定完整定义位于 src/style/properties.mjs。该文件集中声明了所有属性名、类型校验规则与默认值是 documentation/md/style.md 中属性参考的源码级镜像。它按属性组组织属性组覆盖内容代表性属性behavior/visibility交互与显示events、display、visibility、opacity、z-indexnodeBody/nodeBorder/nodeOutline节点外观width、height、shape、background-color、border-*、outline-*backgroundImage节点背景图background-image、background-fit、background-clippie/stripe饼图/条纹背景pie-size、pie-1-background-color等各支持 16 份compound复合节点padding、min-width、min-height等edgeLine/edgeArrow边线、箭头line-color、curve-style、pos-arrow-shapecommonLabel/labelDimensions等标签label、color、font-size、text-wrapcore全局 UIselection-box-color、active-bg-*类型系统styfn.types见 src/style/properties.mjs为每个属性规定了取值范围如zeroOneNumber限定 0~1、nonNegativeNumber不允许负数、percent限定 0~100、nodeShape枚举了全部 29 种节点形状等。解析阶段style.parse()位于 src/style/parse.mjs会依据这些类型校验输入非法值会触发警告。默认属性值集中在getDefaultProperties()src/style/properties.mjs几个常见默认值节点width/height为 30、background-color为#999、shape为ellipse边line-color为#999、curve-style为haystack标签font-size为 16、color为#000opacity为 1 等。这些默认值会在resetToDefault()/fromString()/fromJson()时被自动加载为基底。九、update()的底层机制样式如何落到元素上cy.style()链式调用中的.update()是整个流程的提交操作。从源码看src/style/apply.mjs 中的update()会对所有可变元素执行eles.updateStyle()进而触发样式重算与重绘。重算过程apply()src/style/apply.mjs按元素逐一执行getContextMeta()计算该元素与每个上下文的选择器匹配结果形成上下文键getContextStyle()按键缓存合并出该元素命中的属性集合applyContextStyle()对比新旧上下文差异getPropertiesDiff()有缓存仅对发生变化的属性重新应用包括对 bypass 属性的删除/替换updateStyleHints()按属性组节点体、边框、背景图、pie 等生成风格哈希键用于渲染器决定是否重绘。这种按差异更新 哈希缓存的设计使得大图在样式局部变化时也能保持高效渲染。此外若元素定义了transition-property且新旧值不同updateTransitions()src/style/apply.mjs还会自动生成过渡动画让样式变化平滑呈现。十、配套 API 与测试验证cy.style()与以下 API 配套使用可以构成完整的样式工作流初始化配置cytoscape({ style: ... })接受三种格式styleEnabled选项可控制是否启用样式计算参考测试 test/core-init.mjs 中通过 Promise 加载样式的用例以及styleEnabled: false的场景元素级样式读写ele.style(name)/ele.style(name, val)/ele.style({...})用于单元素查询与设置含 bypass 语义ele.renderedStyle()与ele.numericStyle()分别获取渲染后样式与数值化样式相关断言见测试 test/collection-style.mjs样式参考全部可用属性、取值与说明见 documentation/md/style.md选择器语法见 documentation/md/selectors.md。在实际项目中一个典型的暗色主题切换流程可以这样组织预置多份 JSON 样式模板运行时用cy.style().fromJson(darkThemeJson).update()一键切换或用cy.style(json)直接替换。若只需要导出用户定制结果则用cy.style().json()配合JSON.stringify()序列化后保存下次初始化时再注入。结语cy.style()提供了一套完整、统一的运行时样式读写接口cy.style( input )支持字符串、JSON、stylesheet 三种形态的整表替换链式 API 中的resetToDefault()/clear()/selector()/style()/append()/fromJson()/fromString()/update()覆盖了从零构建、增量追加、整体导入等全部场景json()则可反向导出。理解其背后的类型注册表、默认样式表与最后匹配者生效的级联规则能帮助你在大型可视化项目中写出既灵活又高性能的样式管理代码。赞分享数据可视化【免费下载链接】cytoscape.jsGraph theory (network) library for visualisation and analysis项目地址https://gitcode.com/gh_mirrors/cy/cytoscape.js点击查看免费下载相关推荐终极指南如何使用Mapbox GL Native运行时样式API动态定制地图视觉效果终极指南如何使用Mapbox GL Native运行时样式API动态定制地图视觉效果 Mapbox GL Native是一个功能强大的开源库允许开发者在An图形学3D渲染Material UI 的零运行时样式引擎Pigment CSS 入门指南配置、样式 API、主题与 sx 实战Material UI 的零运行时样式引擎Pigment CSS 入门指南配置、样式 API、主题与 sx 实战 本文基于 Material UI 官方文前端UI组件设计系统Backstage v1.28.0-next.0 升级指南Proxy 鉴权强制开启与后端系统迁移要点Backstage v1.28.0 next.0 升级指南Proxy 鉴权强制开启与后端系统迁移要点 本文档基于 docs/releases/v1.28.0前端开发工具创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考