Comments (26)
I actually encountered this too, very rarely though, with the original vis package. But it was happening only with Vue.js dev tools active so I blamed it on HMR or something. However all these tools slow everything down a lot, maybe it would also happen on a slow PC (if it is indeed the same issue).
from vis-network.
MWE: https://jsfiddle.net/6kg4xr7d/2/
from vis-network.
@mojoaxel This seems like input validation issue to me. We should just throw if the input doesn't pass scale > 0
to not cause this hard to debug confusion. Or is there any point in having zero, negative or string scale?
from vis-network.
I'll fix it.
from vis-network.
Is this bug solved in the 5.0 ?
You tell us 😉
@nicolaslupinski Please try the 5.0 release.
If there the problem still exists you also can try visjs-network. If the problem is fixed there we might adopt those changes.
from vis-network.
@nicolaslupinski Can you please confirm this problem still exists in v5.1.0 !?
from vis-network.
@nicolaslupinski Does this ring a bell?
(vis 4.21.0)
from vis-network.
I'll try to trigger this with the new vis-network.
from vis-network.
(vis-network 5.1.0)
from vis-network.
Steps to reproduce:
net.moveTo({ position: { x, y }, scale })
net.fit({ animation: true })
from vis-network.
Steps to reproduce:
net.moveTo({ position: { x, y }, scale })
net.fit({ animation: true })
Nope, it's more complex than that. This works just fine in MWE.
from vis-network.
The problem is that string scale (notice line 76 in MWE) doesn't work but also doesn't show any error.
from vis-network.
Well it sorta works, but causes problems.
from vis-network.
Steps to reproduce:
net.moveTo({ position: { x, y }, scale })
net.fit({ animation: true })
Thanks @Thomaash!
I can reproduce the issue reliably by setting the scale to 0 (which make the whole network disappear) then network.fit().
network.moveTo({position:{x:1, y:1}, scale:0}); network.fit();
The hacked fix, to reset the network.body.view.translation before redraw and fit, also works reliably :
function redrawAndFit(network){
if(isNaN(network.body.view.translation.x) || isNaN(network.body.view.translation.y)){
network.body.view.translation = {x:0,y:0};
}
network.redraw();
network.fit();
}
I'll have a look at the source, now.
from vis-network.
So far 3 reasons have been reliably identified:
- string scale in moveTo: https://jsfiddle.net/6kg4xr7d/2/
- 0 scale in moveTo: https://jsfiddle.net/pq8heo9b/
- negative scale in moveTo: https://jsfiddle.net/prou1n23/
from vis-network.
@nicolaslupinski Will your problems disappear if you convert your scale to a number and ensure it is grater than zero?
from vis-network.
We should just throw if the input doesn't pass scale > 0 to not cause this hard to debug confusion. Or is there any point in having zero, negative or string scale?
I looked at it and I think you are right! The docs state that The scale is a number greater than 0
. If you want you can add a Number cast bevor you check is scale > 0
this way strings would also work.
@Thomaash Could you provide a fix or should I do it?
from vis-network.
@nicolaslupinski Will your problems disappear if you convert your scale to a number and ensure it is grater than zero?
I doubt.
My original problem is that the rendering is wrong sometimes.
Setting the scale to 0 was a reliable way to get the same bug (and test the fix). But it might not be the cause of the original problem (view.translation = {x:NaN, y:NaN}).
I'd rather have something that prevent view.translation to be set to NaN. I'll have to read the code to figure out where this can happen.
from vis-network.
I manage to reproduce by realoading again and again untill it triggers. There is more than one bug actually, sometimes I get :
network.body.view.translation
{x: -Infinity, y: -Infinity}
network.body.view.scale
Infinity
Then I redraw() and and fit() :
network.body.view.translation
{x: NaN, y: NaN}
network.body.view.scale
0.8912253390328385
The rendering is messy : in the first case, it draws edges only, in the second it draw edges and their labels, but still no nodes.
from vis-network.
@nicolaslupinski Hi, it's perfectly possible that I misidentified your issue and fixed an unrelated problem. Could you please adapt this MWE https://codesandbox.io/embed/vis-networkissues12-mwe-1-exct0 to show your issue so that we all can see it?
from vis-network.
Hi Thomaash
Sorry I don't provide feedback quickly.
I've edited the code to show my issue, but I feel i'm cheating, by reproducing the bug and not its original cause.
Regards
from vis-network.
Hi @nicolaslupinski,
it seems that you forgot to share the link to your MWE. Could you provide it please?
Thanks.
from vis-network.
Indeed...
I boils down to writing :
network.moveTo({
position: {
x: -Infinity,
y: -Infinity
},
scale: 2
});
from vis-network.
@nicolaslupinski Your're right, this is still an issue.
from vis-network.
Hi
This bug seems more related to rendering in a complex web page.
I've tried to add
setTimeout( function(){ redrawAndFit(); redrawAndFit(); }, 1000);
to my page, with
function redrawAndFit(){
if(isNaN(network.body.view.translation.x) || isNaN(network.body.view.translation.y)){
network.body.view.translation = {x:0,y:0}; //hack intended to fix bug
}
network.redraw();
network.fit();
}
But it is still unable to prevent the rendering bug from happening.
I've tried putting an alert() after rendering event, in the bugged case I'm getting the alert before the canva is even put on screen.
The network related code might be executed before all the proper initialisation have been performed, hence it might get undefined or 0 value for canva's height or width.
from vis-network.
Is this still an issue? Should we reopen?
from vis-network.
Related Issues (20)
- how to remove cluster options?
- [BUG] Hierarchical layout bug with vis-network v9.1.7 HOT 1
- Custom Shape Node size (width, height, bounding box) is not scaling to nodeDimensions
- [Feature Request] processProperties for edges when clustering
- deleteEdge callback issue
- Straight edge labels incorrectly drawn at origin when angle is 0
- Diagram rendering is strange as nodes are miles apart
- Init elementOptions from options: _getColor, this.elementOptions.scaling.label.drawThreshold always equal 5 (default value)
- Selective Wind
- 当我监听node的点击事件,并在点击之后打开一个新的标签页面,在点击源标签页回来之后节点会一直跟随鼠标的移动而移动 HOT 1
- TypeError: Cannot read private member from an object whose class did not declare it when I use setData() HOT 1
- Last node not selected via multiselect HOT 1
- How x and y coordinates in smoothWorldCup example calculated?
- Impossible to move on canvas when using addEdgeMode sometimes
- Rendering of fonts on edges problem HOT 1
- Could node.color.background support linear-gradient?
- Could label support to place inside or outside of the node individually? HOT 2
- Need config to set label color when selected
- images are all broken XDDDDDDDDDDDD HOT 1
- Manipulation options removed from the left corner when changing the size of canvas or the container
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from vis-network.