I have a go.picture , but design can be changes based on same attribute value , so how can I customize based on data.
say for example
$(go.Picture, {
width: 20,
height: 20,
source: '../img/cat.svg',
imageAlignment: go.Spot.Top,
alignment: go.Spot.Right,
}),
here I have a set of nodes data in nodeDataArray, and if the name is cat , then the cource should be
source: '../img/cat.svg',
and if the name property in nodes array is dog , source should dynamically changes to source: '../img/dog.svg',
Imagine this is my data
const data = {
nodeDataArray: [
{ key: 0, name: "Cat", color: "lightblue", loc: "0 0" },
{ key: 1, name: "Dog", color: "orange", loc: "150 0" },
],
linkDataArray: [
{ key: -1, from: 0, to: 1 },
{ key: -2, from: 0, to: 2 },
],
skipsDiagramUpdate: false
};
Any help is highly helpful
Use a data-binding bound to the data.name property:
$(go.Picture,
{
width: 20,
height: 20,
source: '../img/default.svg', // This image will display if data.name does not exist
imageAlignment: go.Spot.Top,
alignment: go.Spot.Right,
},
// Note carefully that this binding ONLY runs if data.name is specified
new go.Binding("source", "name", function(name){
if (name === "Dog") return '../img/dog.svg';
else if (name === "Cat") return '../img/cat.svg';
else return '../img/unknown.svg';
})
)
Don't use an empty-string data binding unless you have to, since they have to evaluate on every data change, they are slower.
go.Picture,
{
width: 30,
height: 30,
margin: new go.Margin(2, 5, 2, 22),
},
new go.Binding('source', '', (sourceData, target, name) => {
if (sourceData.name.includes('cat') > -1) {
return '../assets/img/cat.svg';
} else return '../assets/img/dog.svg';
})
),```