d3.js - D3 force layout by node size -

i'm trying create visualization d3 such nodes differently sized particular attribute , bigger nodes go center , smaller nodes go outside. have sizing , clustering , collision detection working, can't figure out how tell bigger nodes go center.

i've tried messing charge, couldn't convince work. got linkdistance move bigger ones center, (a) getting there jittery , (b) smaller ones way outside rather tightly packed. linkdistance still in code, commented out.

it's @ http://pokedex.mrh.is/stats/index.html:

the relevant code (i assume) below. nodes sized per attr attribute. oh, , nodes pokémon.

force = d3.layout.force() // .gravity(0.05) // .charge(function(d, i) { return d.attr; }) // .linkdistance(function(d) { //   return 50000/math.pow(d.source.attr+d.target.attr,1); // }) .nodes(pokemon) // .links(links) .size([$(window).width(), $(window).height()]); 

the following gave me less jittery version of have now.

force = d3.layout.force()     .gravity(0.1)     .charge(function(d, i) { return -d[selectedattr]})     .friction(0.9)     .nodes(pokemon)     .size([$(window).width(), $(window).height()]); 

to answer actual question, each node's coordinates being placed in graph @ random. quote d3 documentation:

when nodes added force layout, if not have x , y attributes set, these attributes initialized using uniform random distribution in range [0, x] , [0, y], respectively.

from experience, there's no magic force method gets nodes want center of map. way i've accomplished desired result in past has been replacing randomized coordinates of each node coordinates place nodes in desired order, expanding center of map.