Using Data Binding in Node Styles
To implement data binding in custom node styles, you can utilize the binding functionality of JavaScript libraries and frameworks like Vue.js, React, Lit, or Angular.
The following demos include ready-to-use demo styles that use data binding. They demonstrate these node styles and illustrate data binding features and conditional rendering to create rich node styles that adapt to zoom level.
All of these styles provide properties for data binding, which always include the layout (x, y, width, height) and the tag of the node, which contains its business data. The current zoom level or the node’s selection state are also useful properties.
The SVG template for each node is rendered relative to its top-left location. Thus, setting x/y attributes of an SVG element results in it being rendered x/y from the node’s top-left bounds.
The node styles are provided as source code so you can easily tailor them to your use case if the default implementation isn’t sufficient. For example, you can add or change properties for data binding.