当前位置: 首页 > news >正文

GoJs 节点动态添加样式

在 GoJS 中,如果你发现 new go.Binding('stroke', 'borderColor', function(borderColor) { ... }) 不生效,可能是因为绑定的语法不正确或者绑定没有被正确地添加到 go.Shape 中。在你的代码中,go.Binding 应该作为 go.Shape 的属性之一被添加,而不是作为 .add 方法的参数。

以下是修正后的代码示例:

mySelf.myDiagram.nodeTemplate = new go.Node('Auto').bindTwoWay('location', 'loc', go.Point.parse, go.Point.stringify).add(new go.Shape('RoundedRectangle', {fill: 'rgb(254, 201, 0)',stroke: 'black', // 默认边框颜色parameter1: 20, // 圆角半径// ... 其他属性 ...})// 绑定 Shape 的 stroke 属性到节点数据的 borderColor 属性.bind('stroke', 'borderColor', function(borderColor) {// 如果 borderColor 为 null 或 undefined,则返回默认颜色 'black'return borderColor || 'black';})),new go.TextBlock({ margin: 8 },new go.Binding("text").makeTwoWay())
);

在这个修正后的代码中,我们使用 .bind('stroke', 'borderColor', function(borderColor) { ... }) 方法来添加数据绑定。注意,.bind 方法是直接链式调用在 go.Shape 对象上,而不是作为 .add 方法的参数。

请确保你的节点数据中包含了 borderColor 属性,这样 GoJS 就可以根据这个属性来设置节点的边框颜色。如果没有提供 borderColor 属性,节点将使用你在 go.Shape 中指定的默认边框颜色。

如果你的数据中没有 borderColor 属性,或者该属性的值为 nullundefined,那么转换函数将返回默认颜色 ‘black’。如果 borderColor 属性存在且有有效值,那么该值将被用作 stroke 颜色。

如果你仍然遇到问题,建议检查以下几点:

  1. 确保你的 GoJS 版本是最新的,因为旧版本可能存在不同的行为或 bug。
  2. 检查控制台是否有任何错误或警告信息,这可能会提供关于问题的线索。
  3. 确保你的数据模型正确地传递给了图表,并且 borderColor 属性在数据中是正确的。
  4. 如果你在使用模板或组件,确保 nodeTemplate 被正确地设置在了图表实例上。
    以上就是文章全部内容了,如果喜欢这篇文章的话,还希望三连支持一下,感谢!

http://www.mrgr.cn/news/34871.html

相关文章:

  • 网站架构知识之nginx第三天(day026 )
  • 基于Springboot+微信小程序的线上水果店系统 (含源码数据库)
  • 用 Python 从零开始创建神经网络(六):优化(Optimization)介绍
  • 代码修改材质参数
  • SpringCloud篇(微服务)
  • Python学习从0到1 day26 第三阶段 Spark ④ 数据输出
  • AI驱动TDSQL-C Serverless 数据库技术实战营-Vanna配合ollama分析TDSQL-C Serverless 数据库
  • Mybatis基础操作
  • 奇迹再现!帕金森患者6年后停药,竟能自如行走:背后的故事与启示
  • 【Python】多个dataframe存入excel的不同的sheet表里,而不会被覆盖的方法
  • 全面解析 Apache Pulsar
  • 数据结构(顺序表)
  • lamda表达式例子全集详解
  • JAVA智能匹配真情传递红娘婚恋交友系统小程序源码
  • PyCharm远程连接AutoDL服务器实现程序调试
  • vue2实现提取字符串数字并修改数字样式(正则表达式)
  • 【linux内核】eBPF基础及应用调研
  • DeiT(ICML2021):Data-efficient image Transformer,基于新型蒸馏且数据高效的ViT!
  • 分布式锁实现与原理探究:介绍总结
  • jQuery——jQuery的基本使用
  • Vue ElemetUI table的行实现按住上下键高亮上下移动效果
  • 剑侠情缘c++源码全套(增加缺失的头文件和相关的库,其它网上流传的都是不全的)剑网三源码
  • springboot中药材进存销管理系统
  • 一例H-worm变种的分析
  • 拼团活动开发秘籍:PHP+Redis实现暂存成团信息,提升效率!
  • JDBC 与 Mybatis 对比