Zooming: Edges and Nodes don't rescale

[philogb]

Zooming: Edges and Nodes don't rescale

[philogb]

What browser/platform are you in?

[gossi]

FF 3.6.6 on OSX and Ubuntu.
As an additional Note: The edges grow and get thicker and thinner, the nodes flow away but the edges do not stay connected with the node. In the end there are gaps between edges and nodes; they stay isolated from each other.

[philogb]

Here's a test with firefox 3.6.6 in OSX. Everything seems to be working fine. Nodes, Edges and Labels are scaled correctly. Edges are always shown (there are some small artifacts in the video, but they are related with the screencast and not the visualization itself). http://www.youtube.com/watch?v=ntcu7vnBVeU

[gossi]

The issue occurs in a SpaceTree. Try here: http://einradfahren.de/index.php?module=mod_trixionary&action=graph

[philogb]

I've seen what the problem is. Currently you're styling HTML node labels which aren't scaled by default in the visualization. Only "canvas" nodes and text is scaled by the visualization. All DOM-elements are left with their original dimensions. This is due to the fact that I don't really know what the user expects as behavior for DOM elements when the canvas is scaled. This can be customizable, although it won't be trivial. I suggest you join the google group to discuss this problem: http://groups.google.com/group/javascript-information-visualization-toolkit .
A video with Spacetree scaling right can be seen here: http://www.youtube.com/watch?v=aphiI7BuOMY . This approach renders the node completely in canvas. Another approach would be to resize "manually" the labels and text when scaling. This can be discussed in the group.

[paulinosantos]

I'm using this code to scale labels simultaneously with the canvas. I call this function onMouseWheel() and onBeforePlotNode().

            function setLabelScaling() {
                var x = st.canvas.scaleOffsetX,
                y = st.canvas.scaleOffsetY;
                $(".node").css("-moz-transform", "scale(" + x +"," +  y + ")");
                $(".node").css("-webkit-transform", "scale(" + x +"," + y + ")");
                $(".node").css("-ms-transform", "scale(" + x +"," +  y + ")");
                $(".node").css("-o-transform", "scale(" + x +"," +  y + ")");
            }