Translate and scale issue

[Komal Mehta]

Hi,

 

I am absolutely new to D3js and got stucked at one translate and scale problem.

 

I want to scale my D3 force layout to e.g. 400% and then make it center on the screen, if this has been displaced after scaling.  So I first scale it and then check the Bounding Box of the <g> which contains the entire force layout. If the group is out screen area then transition(0,0). (I also tried center(0,0).  The problem is - when <g> is transitioned (or centered) the scale gets reset to 100%.  Here is my code.

 

var vis = d3.select("#graph").append("svg:svg")
        .attr("width", 960)
        .attr("height", 450)
        .append('g')
        .attr('id', 'mygroup');

/*
 More code goes here to draw ~15 nodes, text, and images
*/

function zoom(scaleValue){

//this is working fine, to scale vis at xx% whatever comes in scaleValue.
 vis.attr("transform", "scale(" + scaleValue + ")");

        var bbox = document.getElementById("mygroup").getBBox();
        var newX = 0;
        var newY = 0;

        if (bbox.y < 0) {
            newY = -(bbox.y);           
        }
       
        if (bbox.x < 0) {
            newX = -(bbox.x);           
        }

        //animate vis to visible area
        vis.transition()
           .duration(2000)
           .attr("transform", "scale(" + scaleValue + ")" + "translate(" + newX + "," + newY + ")");

 

 /************also tried center(0,0) *****************/
 /*vis.transition()
           .duration(2000)
           .attr("transform", "scale(" + scaleValue + ")" + "center(0,0)");*/
}

 

Why is scale is getting reset to 100% when I translate it second time.

 

thanks,

Komal

[Komal Mehta]

Can anyone help me here please?

[Ian Johnson]

You need to do the transform all at once:
.attr("transform", "scale(...)translate(0,0)")

Your code was overwriting the transform attribute with the translate and thus losing the scale.

[Komal Mehta]

I tried doing the same. But it is doing the transform part. Now I am
using only one transform statement as:

.attr("transform", "scale(" + scaleValue + ")" + "translate(0,0)");

But now graph scales correctly, but does not translate at all.

On Jan 24, 10:50 pm, Ian Johnson <enja...@gmail.com> wrote:
> You need to do the transform all at once:
> .attr("transform", "scale(...)translate(0,0)")
>
> Your code was overwriting the transform attribute with the translate and
> thus losing the scale.

[Komal Mehta]

Oops few typos in the prev reply mis-conveys my message so typing
again...

I tried doing the same. But now it is only doing scale.
I am using only one statement now:

.attr("transform", "scale(" + scaleValue + ")" + "translate(0,0)");

With this graph scales correctly, but does not translate at all.

[Komal Mehta]

I got this working by changing the sequence of scale and translate. I
am using:

.attr("transform", "translate(" + cx + "," + cy + ")" + "scale(" +
scaleValue + ")");

where, cx and cy are amount to be moved depending upon current x,y and
width, height.