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
_______________________________________________
Dev mailing list
Dev@wso2.org
http://wso2.org/cgi-bin/mailman/listinfo/dev
