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
属性,或者该属性的值为 null
或 undefined
,那么转换函数将返回默认颜色 ‘black’。如果 borderColor
属性存在且有有效值,那么该值将被用作 stroke
颜色。
如果你仍然遇到问题,建议检查以下几点:
- 确保你的 GoJS 版本是最新的,因为旧版本可能存在不同的行为或 bug。
- 检查控制台是否有任何错误或警告信息,这可能会提供关于问题的线索。
- 确保你的数据模型正确地传递给了图表,并且
borderColor
属性在数据中是正确的。 - 如果你在使用模板或组件,确保
nodeTemplate
被正确地设置在了图表实例上。
以上就是文章全部内容了,如果喜欢这篇文章的话,还希望三连支持一下,感谢!