i have a go.picture , but design can be changes based on same attribute value , so how can i customise 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

CodePudding user response：

          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';
          })
            ),```

CodePudding user response：

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.