javascriptreactjsgojs

gojs+ customising picture based on some data condition


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


Solution

  • 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.