Apologies for unclear text, something happened on send.
function zoomFit(){
var graphBBox = d3.select("svg g#mainG").node().getBBox(),
graphScreen = $("svg");
var scaleAmount = Math.min(graphScreen.width()/(graphBBox.width),
graphScreen.height()/(graphBBox.height));
var xOffSet = graphBBox.x > 0 ? -Math.abs(graphBBox.x) :
Math.abs(graphBBox.x),
yOffSet = graphBBox.y > 0 ? -Math.abs(graphBBox.y) :
Math.abs(graphBBox.y);
var tx = (xOffSet*scaleAmount + (graphScreen.width()/scaleAmount -
graphBBox.width) * scaleAmount/2),
ty = (yOffSet*scaleAmount + (graphScreen.height()/scaleAmount
- graphBBox.height) * scaleAmount/2);
zoom.translate([tx, ty]).scale(scaleAmount);
zoom.event(svg);}
On Fri, Jan 30, 2015 at 12:01 PM, Jerad Rutnam <je...@wso2.com> wrote:
> Hi All,
>
> After days of search I found an example [1] which have the zoom-out to fit
> view-port functionality. It's base on d3.js and cola.v3.js. So I was able
> to get a calculation idea from it. See the code below [Solved].
>
> [1] - http://marvl.infotech.monash.edu/webcola/examples/browsemovies.html
>
> function zoomFit(){
> var graphBBox = d3.select("svg g#mainG").node().getBBox(),
> graphScreen = $("svg");
>
> var scaleAmount = Math.min(graphScreen.width()/(graphBBox.width),
> graphScreen.height()/(graphBBox.height));
>
> var xOffSet = graphBBox.x > 0 ? -Math.abs(graphBBox.x) :
> Math.abs(graphBBox.x),
> yOffSet = graphBBox.y > 0 ? -Math.abs(graphBBox.y) :
> Math.abs(graphBBox.y);
>
> var tx = (xOffSet*scaleAmount + (graphScreen.width()/scaleAmount -
> graphBBox.width) * scaleAmount/2),
> ty = (yOffSet*scaleAmount + (graphScreen.height()/scaleAmount -
> graphBBox.height) * scaleAmount/2);
>
> zoom.translate([tx, ty]).scale(scaleAmount);
> zoom.event(svg);
> }
>
> Thanks!
> Jerad
>
>
> On Thu, Jan 29, 2015 at 10:55 AM, Jerad Rutnam <je...@wso2.com> wrote:
>
>> Hi,
>>
>> Centering graph works fine with below calculation. But it effects the
>> *zoom.event* which works fine at the moment. So I had to revert it back
>> to the old method.
>>
>> var graphBBoxClient = graph[1].getBoundingClientRect();
>>
>> var x = graphBBox.x > 0 ? (graphScreen.width() - graphBBoxClient.width) -
>> Math.abs(graphBBox.x) : (graphScreen.width() - graphBBoxClient.width) +
>> Math.abs(graphBBox.x);
>> var y = graphBBox.y > 0 ? (graphScreen.height() - graphBBoxClient.height) -
>> Math.abs(graphBBox.y) : (graphScreen.height() - graphBBoxClient.height) +
>> Math.abs(graphBBox.y);
>>
>> d3.select("svg g#mainG").transition().attr("transform",
>> "scale("+scaleAmount+") translate("+x+","+y+")");
>>
>> So i'm trying to calculate it properly using the current values, which
>> i'm getting already. but bounding box coordinate values cause a problem. If
>> anyone can help me to figure it out the centering graph would be appreciate.
>>
>> Here is my current code,
>>
>> var zoom = d3.behavior.zoom().on("zoom", redraw);
>>
>> function getCenter() {
>> var center = {
>> x : this.width / 2,
>> y : this.height / 2
>> };
>> return center;
>> }
>>
>> function zoomIn(){
>> var coor = zoom.translate();
>> var x = (coor[0] - getCenter().x) * 1.1 + getCenter().x;
>> var y = (coor[1] - getCenter().y) * 1.1 + getCenter().y;
>>
>> zoom.scale(zoom.scale() * 1.1);
>> zoom.translate([x, y]);
>>
>> zoom.event(svg);
>> }
>>
>> function zoomOut(){
>> var coor = zoom.translate();
>> var x = (coor[0] - getCenter().x) * 0.9 + getCenter().x;
>> var y = (coor[1] - getCenter().y) * 0.9 + getCenter().y;
>>
>> zoom.scale(zoom.scale() * 0.9);
>> zoom.translate([x, y]);
>>
>> zoom.event(svg);
>> }
>>
>> function zoomFit(){
>>
>> var graph = [d3.select("svg").node(),d3.select("svg g#mainG").node()],
>> svgBBox = graph[0].getBBox(),
>> graphBBox = graph[1].getBBox(),
>> graphScreen = $("svg");
>>
>> var graphScreenWidth = graphScreen.width() / graphBBox.width,
>> graphScreenHeight = graphScreen.height() / graphBBox.height,
>> scaleAmount = graphScreenWidth > graphScreenHeight ? graphScreenHeight :
>> graphScreenWidth;
>>
>> var xOffSet = graphBBox.x > 0 ? -Math.abs(graphBBox.x) : Math.abs
>> (graphBBox.x),
>> yOffSet = graphBBox.y > 0 ? -Math.abs(graphBBox.y) : Math.abs(graphBBox.y
>> );
>>
>> // Where the calculation should be done
>> var x = getCenter().x - scaleAmount * getCenter().x;
>> var y = getCenter().y - scaleAmount * getCenter().y;
>>
>> zoom.scale(scaleAmount);
>> zoom.translate([x, y]);
>>
>> zoom.event(svg);
>> }
>>
>> Thanks,
>> Jerad
>>
>>
>> On Wed, Jan 28, 2015 at 11:32 AM, Jerad Rutnam <je...@wso2.com> wrote:
>>
>>> Hi,
>>>
>>> I found that issue is not the way I calculate, but it was causing by a
>>> SVG Group (g) Element Bounding Box X,Y coordinates. So I just had to
>>> subtract it.
>>>
>>> If anyone needs to get the svg boundingBox values use the code (this
>>> returns an array),
>>>
>>> d3.select("svg g#groupElement").node().getBBox();
>>>
>>> d3.select("svg g#groupElement").node().getBoundingClientRect();
>>>
>>> If wants to get from jquery,
>>>
>>> $("svg").find("g")[0].getClientRects()[0];
>>>
>>> Thanks,
>>> Jerad
>>>
>>> On Mon, Jan 26, 2015 at 1:54 PM, Jerad Rutnam <je...@wso2.com> wrote:
>>>
>>>> Hi All,
>>>>
>>>> I'm working on a feature in G-Reg (Dependency Graph) using D3. And
>>>> having an issue to centering the graph after zoom-out to screen-size in
>>>> viewport.
>>>>
>>>> Currently I'm getting these values,
>>>>
>>>> graphScreen = "svg";
>>>>
>>>> mainGraphGroup = "svg g"
>>>>
>>>> var topOffset = (graphScreen.width() - mainGraphGroupWidth)/2,
>>>> leftOffset = (graphScreen.height() - mainGraphGroupHeight)/2;
>>>>
>>>> Is there anyway I can achieve centering by these values? or is there a
>>>> method to achieving this? Any help will be appreciate. Searched on web but
>>>> couldn't find a proper solution for it yet.
>>>>
>>>> Thanks,
>>>> Jerad
>>>> --
>>>> *Jerad Rutnam*
>>>> *Software Engineer - UI*
>>>>
>>>> WSO2 Inc.
>>>> lean | enterprise | middleware
>>>> M : +94 77 959 1609 | E : je...@wso2.com | W : www.wso2.com
>>>>
>>>
>>>
>>>
>>> --
>>> *Jerad Rutnam*
>>> *Software Engineer - UI*
>>>
>>> WSO2 Inc.
>>> lean | enterprise | middleware
>>> M : +94 77 959 1609 | E : je...@wso2.com | W : www.wso2.com
>>>
>>
>>
>>
>> --
>> *Jerad Rutnam*
>> *Software Engineer*
>>
>> WSO2 Inc.
>> lean | enterprise | middleware
>> M : +94 77 959 1609 | E : je...@wso2.com | W : www.wso2.com
>>
>
>
>
> --
> *Jerad Rutnam*
> *Software Engineer*
>
> WSO2 Inc.
> lean | enterprise | middleware
> M : +94 77 959 1609 | E : je...@wso2.com | W : www.wso2.com
>
--
*Jerad Rutnam*
*Software Engineer*
WSO2 Inc.
lean | enterprise | middleware
M : +94 77 959 1609 | E : je...@wso2.com | W : www.wso2.com
_______________________________________________
Dev mailing list
Dev@wso2.org
http://wso2.org/cgi-bin/mailman/listinfo/dev
