How to dynamically change the color of custom type nodes externally? #2167

joylix · 2024-06-26T11:55:12Z

joylix
Jun 26, 2024

In the following program, I want to achieve that when any node is clicked, the color of other nodes will change to gray, but for the custom type node such as node3, the color change cannot be achieved.

<!DOCTYPE html>
    <html>
      <head>
        <meta http-equiv="content-type" content="text/html; charset=UTF8" />
        <title>Vis Network Example Applications </title>
        <script type="text/javascript" src="js/vis-network.min.js"></script>
    
        <style type="text/css">
    		#mynetwork {
    			width: 1200px;
    			height: 600px;
    			border: 1px solid lightgray;
          	}
        </style>
      </head>
    
    <body>
    <div id="mynetwork"></div>
      <div class="floating-menu">
        <a href="#" class="floating-menu-link" target="_blank">Link</a>
      </div>
    
    <script type="text/javascript">
    
        var nodes = [
            { 
                id: 1, 
                label: 'Node1', 
                shape: "dot", 
                color: { background: 'red' } 
            },
            { 
                id: 2, 
                label: 'Node2',            
                shape: "square",   
                color: { background: 'lightGreen' } 
            },
    
    		{
    			id: 3,
    			label: "Node3",
    			shape: "custom",
    			color: {background: 'yellow'},
    			ctxRenderer: ({
    				ctx,
    				id,
    				x,
    				y,
    				state: { selected, hover },
    				style,
    				label,
    				color,
    			}) => {
    				const r = style.size;
    				const sideLength = r * Math.sin(Math.PI / 5);
    				const drawNode = () => {
    					ctx.beginPath();
    					const vertices = 5;
    					const a = (Math.PI * 2) / vertices;
    					const startAngle = (3 * Math.PI) / 10;    
    					ctx.moveTo(x + r * Math.cos(startAngle), y + r * Math.sin(startAngle));
    					for (let i = 1; i <= vertices; i++) {
    						ctx.lineTo(
    						x + r * Math.cos(startAngle + a * i),
    						y + r * Math.sin(startAngle + a * i)
    						);
    					}
    					ctx.closePath();
    					ctx.save();      
    					ctx.fillStyle = "lightblue";    
    					//After replacing it with the following line it doesn't work
    					//ctx.fillStyle = color.background; 
    					ctx.fill();
    					ctx.strokeStyle = "red";
    					ctx.stroke();
    					ctx.restore();
    					ctx.font = "normal 12px Arial";
    					ctx.fillStyle = "black";
    					ctx.fillText(label, x - sideLength + 10, y - sideLength / 2 + 35);
    					//I don't know why the label here can be passed in correctly
    				};
    				return {
    					drawNode,
    					nodeDimensions: { width: 2 * r, height: 2 * r },
    				};
    			},
    		}, 
        ];
        var edges = [
            { from: 1, to: 2 },
            { from: 2, to: 3 },
    
        ];
        var options = {
            nodes: {
                size: 20,
                scaling: {
                    label: {
                        enabled: true,
                        min: 8,
                        max: 20,
                        maxVisible: 20,
                        drawThreshold: 10
                    }
                }
            },
            edges: {
                width: 1,
                arrows: {
                    to: {
                        enabled: true,
                        scaleFactor: 0.5
                    }
                }
            },
            interaction: {
                dragNodes: true,
                dragView: true,     
                hover: true,  
                hideEdgesOnDrag: false,
                hideNodesOnDrag: false
            },
    
        };
        var nodesDataset = new vis.DataSet(nodes); 
        var edgesDataset = new vis.DataSet(edges); 
        var container = document.getElementById("mynetwork");
    
        var data = { nodes: nodesDataset, edges: edgesDataset }; 
        var network = new vis.Network(container, data, options);
        var allNodes = nodesDataset.get({ returnType: "Object" });
    	network.on("click", function(params) {
      		if (params.nodes.length > 0) {
    			var selectedNode = params.nodes[0];
    			var updates = [];
    
    			for (let nodeId in allNodes) {
    				if (nodeId == selectedNode) {
    
    					updates.push(allNodes[nodeId]);
    				} else {
    
    					allNodes[nodeId].color = { background: 'lightGray' };
    					updates.push(allNodes[nodeId]);
    				}
    			}				
    			nodesDataset.update(updates);
     		}
    	});      
    </script>
    </body>
    </html>

How should I modify it to make the color of node3 also turn gray?

joylix · 2024-06-27T03:28:44Z

joylix
Jun 27, 2024
Author

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF8" />
    <title>Vis Network Example Applications </title>  
    <script type="text/javascript" src="js/vis-network.min.js"></script>
    <style type="text/css">
      #mynetwork {
        width: 1200px;
        height: 600px;
        border: 1px solid lightgray;
      }
    </style>
  </head>
<body>
<div id="mynetwork"></div>
  <div class="floating-menu">
    <a href="#" class="floating-menu-link" target="_blank">Link</a>
  </div>

<script type="text/javascript">
    var nodes = [
        { 
            id: 1, 
	        label: 'Node1', 
	        shape: "dot", 
	        color: { background: 'red' } 
        },
        { 
            id: 2, 
            label: 'Node2',            
            shape: "square",   
            color: { background: 'lightGreen' } 
        },
    
{
  id: 3,
  label: "Node3",     
  shape: "custom",
  style: {
      color:{background:'yellow', border:'red'},
  },
  ctxRenderer: ({
    ctx,
    id,
    x,
    y,
    state: { selected, hover },
    style,
    label,
    
  }) => {
    const r = style.size;
    const sideLength = r * Math.sin(Math.PI / 5);
    const drawNode = () => {
      ctx.beginPath();
      const vertices = 5;
      const a = (Math.PI * 2) / vertices;
      const startAngle = (3 * Math.PI) / 10;    
      ctx.moveTo(x + r * Math.cos(startAngle), y + r * Math.sin(startAngle));
      for (let i = 1; i <= vertices; i++) {
        ctx.lineTo(
          x + r * Math.cos(startAngle + a * i),
          y + r * Math.sin(startAngle + a * i)
        );
      }
      ctx.closePath();
      ctx.save();      
      ctx.fillStyle = style.color.background;      
      ctx.fill();
      ctx.strokeStyle = style.color.border;
      ctx.stroke();
      ctx.restore();

    ctx.font = "normal 12px Arial";
    ctx.fillStyle = "black";
    ctx.fillText(label, x - sideLength + 10, y - sideLength / 2 + 35);

    };
    return {
      drawNode,
      nodeDimensions: { width: 2 * r, height: 2 * r },
    };
  },
}, 
    ];
    var edges = [
        { from: 1, to: 2 },
        { from: 2, to: 3 },
    
    ];
    var options = {
        nodes: {
            size: 20,
            scaling: {
                label: {
                    enabled: true,
                    min: 8,
                    max: 20,
                    maxVisible: 20,
                    drawThreshold: 10
                }
            }
        },
        edges: {
            width: 1,
            arrows: {
                to: {
                    enabled: true,
                    scaleFactor: 0.5
                }
            }
        },
        interaction: {
            dragNodes: true,
            dragView: true,     
            hover: true,  
            hideEdgesOnDrag: false,
            hideNodesOnDrag: false
        },
    };   
    var nodesDataset = new vis.DataSet(nodes); 
    var edgesDataset = new vis.DataSet(edges); 
    var container = document.getElementById("mynetwork");
    var data = { nodes: nodesDataset, edges: edgesDataset }; 
    var network = new vis.Network(container, data, options);
    var allNodes = nodesDataset.get({ returnType: "Object" });
network.on("click", function(params) {
  if (params.nodes.length > 0) {
    var selectedNode = params.nodes[0];
    var updates = [];
    for (let nodeId in allNodes) {
      if (nodeId == selectedNode) {    
        updates.push(allNodes[nodeId]);
      } else {   
         let nodeShape = allNodes[nodeId].shape;
	if (nodeShape ==="custom"){	    
                     allNodes[nodeId].style.color= { background: 'lightGray' };    
 	}
              else {
        	allNodes[nodeId].color = { background: 'lightGray' };
	}
        updates.push(allNodes[nodeId]);
      }
    }
     nodesDataset.update(updates);
  }
});
 </script>
</body>
</html>

The modified code above can turn node3 gray, but its initialization color can never be set to the specified yellow. It seems that the style color cannot be passed to the ctxRenderer function

0 replies

joylix · 2024-06-27T05:12:04Z

joylix
Jun 27, 2024
Author

I used an inefficient alternative:

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF8" />
    <title>Vis Network Example Applications </title>
    

    <script type="text/javascript" src="js/vis-network.min.js"></script>

    <style type="text/css">
      #mynetwork {
        width: 1200px;
        height: 600px;
        border: 1px solid lightgray;
      }
    </style>
  </head>

<body>
<div id="mynetwork"></div>
  <div class="floating-menu">
    <a href="#" class="floating-menu-link" target="_blank">Link</a>
  </div>

<script type="text/javascript">

    var nodes = [
        { 
            id: 1, 
	        label: 'Node1', 
	        shape: "dot", 
	        color: { background: 'red' } 
        },

        { 
            id: 2, 
            label: 'Node2',            
            shape: "square",   
            color: { background: 'lightGreen' } 
        },
    
		{
			id: 3,
			label: "Node3|yellow|red",      //第一项是真正的label,第二项是background, 第三项是border    
			shape: "custom",
			style: {
				color:{background:'yellow', border:'red'},
			},
			ctxRenderer: ({
				ctx,
				id,
				x,
				y,
				state: { selected, hover },
				style,
				label,
			
			}) => {
				const r = style.size;
				const sideLength = r * Math.sin(Math.PI / 5);
				const drawNode = () => {
				ctx.beginPath();
				const vertices = 5;
				const a = (Math.PI * 2) / vertices;
				const startAngle = (3 * Math.PI) / 10;    
				ctx.moveTo(x + r * Math.cos(startAngle), y + r * Math.sin(startAngle));
				for (let i = 1; i <= vertices; i++) {
					ctx.lineTo(
					x + r * Math.cos(startAngle + a * i),
					y + r * Math.sin(startAngle + a * i)
					);
				}
				ctx.closePath();
				ctx.save();      
				ctx.fillStyle = label.split("|")[1];      
				ctx.fill();
				ctx.strokeStyle =  label.split("|")[2];
				ctx.stroke();
				ctx.restore();

				ctx.font = "normal 12px Arial";
				ctx.fillStyle = "black";
				ctx.fillText( label.split("|")[0], x - sideLength + 10, y - sideLength / 2 + 35);

				};
				return {
				drawNode,
				nodeDimensions: { width: 2 * r, height: 2 * r },
				};
			},
		}, 
    ];
    var edges = [
        { from: 1, to: 2 },
        { from: 2, to: 3 },    
    ];
    var options = {
        nodes: {
            size: 20,
            scaling: {
                label: {
                    enabled: true,
                    min: 8,
                    max: 20,
                    maxVisible: 20,
                    drawThreshold: 10
                }
            }
        },
        edges: {
            width: 1,
            arrows: {
                to: {
                    enabled: true,
                    scaleFactor: 0.5
                }
            }
        },
        interaction: {
            dragNodes: true,
            dragView: true,     
            hover: true,  
            hideEdgesOnDrag: false,
            hideNodesOnDrag: false
        },

    };
    
 

    var nodesDataset = new vis.DataSet(nodes); 
    var edgesDataset = new vis.DataSet(edges); 
    var container = document.getElementById("mynetwork");
    
    var data = { nodes: nodesDataset, edges: edgesDataset }; 
    var network = new vis.Network(container, data, options);
    var allNodes = nodesDataset.get({ returnType: "Object" });
   


	network.on("click", function(params) {
		if (params.nodes.length > 0) {
			var selectedNode = params.nodes[0];
			var updates = [];
			for (let nodeId in allNodes) {
				if (nodeId == selectedNode) {    
					updates.push(allNodes[nodeId]);
				} 
				else {   
					let nodeShape = allNodes[nodeId].shape;
					if (nodeShape ==="custom"){	    
						let x = allNodes[nodeId].label;
						let y = 'lightGray' ;
						allNodes[nodeId].label= x.split('|').map((v, i) => i === 1 ? y : v).join('|');    
					}
					else {
						allNodes[nodeId].color = { background: 'lightGray' };
					}
					updates.push(allNodes[nodeId]);
				}
			}		
			nodesDataset.update(updates);
		}
	});
 

</script>
</body>
</html>

This method may seem a bit stupid, but at least it achieves the functionality I need.

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

How to dynamically change the color of custom type nodes externally? #2167

{{title}}

Replies: 2 comments

{{title}}

{{title}}

Select a reply

How to dynamically change the color of custom type nodes externally? #2167

joylix Jun 26, 2024

Replies: 2 comments

joylix Jun 27, 2024 Author

joylix Jun 27, 2024 Author

joylix
Jun 26, 2024

joylix
Jun 27, 2024
Author

joylix
Jun 27, 2024
Author