Finding a graph's centroid in D3.js

Question

I am trying to allow an entire graph (such as a collapsible dendrogram (http://mbostock.github.com/d3/talk/20111018/tree.html) to be moved in the visualization by using the centroid of the entire graph and do not know what the best course of action would be to treat this graph as a discrete node and to use the centroid coordinates for manipulation. How would the centroid of a graph be calculated, allowing for the graph to be dynamically sized to allow for new nodes, thereby recalculating the centroid?

Answer 1

It sounds like in your case an easier course of action would be to get the container of the graph (i.e. the SVG) and calculate its center point. Assuming that the margins of the graph you're drawing are not too big and/or unbalanced, the behaviour would be very similar to computing the centroid of the graph, but much easier to achieve.

The code would look something like this.

var centerx = svg.getBBox().x + svg.getBBox().width/2,
    centery = svg.getBBox().y + svg.getBBox().height/2;

Answer 2

Perhaps this is helpful: http://graphstream-project.org/doc/Algorithms/Centroid_1.0/. I know you are asking in the context of D3.js. But there may be something to leverage from the centroid in GraphStream.