I constructed a network with about 1000 nodes in SVG format. Now I want to change the color of all the nodes dynamically (with time). For starters I just want to make sure that the circles/nodes in my SVG figure change colors with time based on a random number generator. Can I use a simple for loop in JavaScript to bring about N number of node color changing events?
我用SVG格式构建了一个大约1000个节点的网络。现在我想动态地改变所有节点的颜色(随着时间的推移)。对于初学者,我只想确保SVG图中的圆/节点根据随机数生成器随时间改变颜色。我可以在JavaScript中使用简单的for循环来实现N个节点颜色更改事件吗?
This is the function I wrote hoping that it would change the color of a particular node/circle hundred times triggered by single mouse click
这是我写的函数,希望它可以通过单击鼠标来触发特定节点/圆的颜色百次
function ChangeRandomNodeColor(){
var mycircle = document.getElementById("node_1150")
for (i = 0; i < 100 ; i++) {
var r = Math.random()
if (r < 0.33) {
mycircle.style.fill = "yellow" ;
}
else if (r < 0.66) {
mycircle.style.fill = "cyan" ;
}
else {
mycircle.style.fill = "black" ;
}
}
}
Unfortunately all it does is to change the color only once per every mouse click, it's as though the for loop is completely useless!
不幸的是,它只是每次鼠标点击只更改一次颜色,就好像for循环完全没用!
1 个解决方案
#1
0
Let us consdider following rect as one node . Use window.setInterval function for timer and use Math.Random fucntion to generate a random number and use according your requirement.
让我们将rect作为一个节点。对定时器使用window.setInterval函数,并使用Math.Random函数生成随机数并根据您的要求使用。
<svg>
<rect width="100px" height="100px" fill="yellow" id="one">
</rect>
<svg>
document.getElementById("one").style.fill = "red";
#1
0
Let us consdider following rect as one node . Use window.setInterval function for timer and use Math.Random fucntion to generate a random number and use according your requirement.
让我们将rect作为一个节点。对定时器使用window.setInterval函数,并使用Math.Random函数生成随机数并根据您的要求使用。
<svg>
<rect width="100px" height="100px" fill="yellow" id="one">
</rect>
<svg>
document.getElementById("one").style.fill = "red";