Zooming a SpaceTree

[Jody]

I have a question about the SpaceTree.  I've enabled zooming, but my labels aren't scaling with the nodes.  Is there a way to tie the label size to the node size?  I've tried using several of the on controllers to get the node.width or canvas.scale when the and even tried to onMouseWheel.  Is it possible?  Or can you explicitly set the scale of the canvas on button click?    Please see screen. image.  Is it possible to scale the canvas to the extent (height & width) of the tree? When the tree is not constrained, its much too large.  How do you recommend I proceed?

Please see example of output (this what happens when I zoom out.  The label's content scale does not change.

Thanks,

Jody

[Deimon]

You lables are html. So use CSS to scale them.

-moz-transform : scale(... , ...)
-webkit-transform : scale(... , ...)

-ms-transform : scale(... , ...) 

  -o-transform : scale(... , ...)

[Casel Chen]

I met the same problem. Sorry for not good at css yet, could you explain it in detail? How does it response by mouse wheel event when do zoom action? Could you paste some code snippet? Thanks!

在 2013年4月25日星期四UTC+8下午8时25分58秒，Deimon写道：

[Deimon]

пятница, 26 апреля 2013 г., 12:43:35 UTC+4 пользователь Casel Chen написал:

I met the same problem. Sorry for not good at css yet, could you explain it in detail? How does it response by mouse wheel event when do zoom action? Could you paste some code snippet? Thanks!

在 2013年4月25日星期四UTC+8下午8时25分58秒，Deimon写道：

In this example I used jQuery

.scale_plus
{
    position:relative; float:left; background-image:url('/css/up.gif'); cursor:pointer; width:28px;height:28px; z-index:1000; margin:4px 0 0 4px;
}
.scale_minus
{
    position:relative; float:left; background-image:url('/css/down.gif'); cursor:pointer; width:28px;height:28px; z-index:1000; margin:4px 0 0 4px;
}
<script>
var sc=1;

$(document).ready(function(){
    if(navigator.appName.indexOf("Explorer")<0){
        $("#infovis").html('<div class=\"scale_plus\" onclick=\"res(1.25)\"></div><div class=\"scale_minus\" onclick=\"res(.8)\"></div>');
    }   
})

 onCreateLabel: function(label, node){
            label.id = node.id;  
            label.className="st_label"
            $(label).css("-moz-transform", "scale(" + sc +"," +  sc + ")")
            $(label).css("-webkit-transform", "scale(" + sc +"," +  sc + ")")
            $(label).css("-ms-transform", "scale(" + sc +"," +  sc + ")")
            $(label).css("-o-transform", "scale(" + sc +"," +  sc + ")")
....

 

function res(msht){
     if(sc*msht>0.1 && sc*msht<1.25){
         sc=sc*msht;
         var canv=st.canvas;
         canv.scale(msht,msht);
         $(".st_label").each(function(){
            $(this).css("-moz-transform", "scale(" + sc +"," +  sc + ")")
            $(this).css("-webkit-transform", "scale(" + sc +"," +  sc + ")")
            $(this).css("-ms-transform", "scale(" + sc +"," +  sc + ")")
            $(this).css("-o-transform", "scale(" + sc +"," +  sc + ")")

         })
        
     }
}

[Paulino]

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 + ")");

                }

[Adi von Dort]

Hi Paulino
I'm pretty new to Jit but I managed to get the zoom in/out working based on this and other answers.
What I still cannot get to work is the label scaling via css. Is there any chance you can share the part of your css file that handles label zooming?
Thanks