Tengo un go.picture, pero el diseño puede cambiar según el mismo valor de atributo, entonces, ¿cómo puedo personalizar según los datos?
decir por ejemplo
$(go.Picture, { width: 20, height: 20, source: '../img/cat.svg', imageAlignment: go.Spot.Top, alignment: go.Spot.Right, }),aquí tengo un conjunto de datos de nodos en nodeDataArray, y si el nombre es cat , entonces el origen debería ser
fuente: '../img/cat.svg',
y si la propiedad de nombre en la matriz de nodos es perro, la fuente debería cambiar dinámicamente a fuente: '../img/dog.svg',
Imagina que estos son mis datos.
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 };Cualquier ayuda es de mucha ayuda
Use un enlace de datos vinculado a la propiedad data.name :
$(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'; }) )No use un enlace de datos de cadena vacía a menos que tenga que hacerlo, ya que tienen que evaluar cada cambio de datos, son más lentos.
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'; }) ),```