0
166
VistasGoJS: evita que una región específica sea ocupada por nodos en un ForceDirectedLayout
Me gustaría tener un área de coordenadas específica reservada para una leyenda en mi diagrama GoJS que usa un ForceDirectedLayout para diseños de nodos. Sin embargo, la forma de la leyenda no afecta el diseño de los nodos cuando se aplica como una Part y, lamentablemente, el uso de un Node de marcador de posición no permite la colocación en función de las coordenadas del documento . Esto lleva a que el contenido de la leyenda se superponga al contenido del nodo dependiendo de cómo se apliquen aleatoriamente las fuerzas.
¿Cómo se puede crear una región en ForceDirectedLayout que afecte o aplique fuerzas a los nodos a medida que se calculan, pero que a su vez no sea un nodo o sea un nodo con una posición fija y sin vínculos?
Idealmente, sería posible definir un Rect específico en el diagrama que no sea accesible para los nodos, o tener una Part que pueda aplicar fuerzas. Lo más cercano que pude encontrar para definir un rect específico es el cuadro delimitador total a través del boundsComputation de los límites del diseño, que solo reduciría el área y no permitiría cortar una región específica.
Aquí hay una ilustración específica del desafío, donde la leyenda generalmente se superpondrá al contenido de los nodos ya que no hay fuerza para repeler los nodos:
Parece que puede ser posible con ForceDirectedLayout.isFixed según lo siguiente, pero no está claro cómo se establecería una posición de nodo específica sobre esa base: https://forum.nwoods.com/t/maintain-existing-graph- forma-al-añadir-elementos/7159/6
1 Respuestas
Responde la pregunta0
Podrías probar una variación de esta clase:
class FixedForceDirectedLayout extends go.ForceDirectedLayout { isFixed(v) { return v.node.category === "Fixed"; } electricalCharge(v) { return (v.node.category === "Fixed") ? 300 : this.defaultElectricalCharge; } }Es posible que desee jugar con el valor devuelto por el método electricCharge .
Para instalar, simplemente configure Diagram.layout en una instancia de esta clase ForceDirectedLayout personalizada.
const myDiagram = $(go.Diagram, "myDiagramDiv", { layout: new FixedForceDirectedLayout(), . . .Ahora, donde desee que haya un área vacía, coloque un nodo de categoría "Fijo" que cubra esa área. Por ejemplo,
myDiagram.nodeTemplateMap.add("Fixed", $(go.Node, { background: "whitesmoke" }, // just for demo purposes, so you can see it new go.Binding("position", "bounds", b => go.Rect.parse(b).position), new go.Binding("desiredSize", "bounds", b => go.Rect.parse(b).size) ));Ejemplo de datos del modelo:
myDiagram.model = new go.GraphLinksModel( [ { category: "Fixed", bounds: "20 20 100 100" }, . . .