D3.js - how can I position a force chart upwards and to the left of a page?

Question

I have a force network graph (in a Drupal site) which does what I want it to (thanks to many members of stackoverflow) but it ends up about 400px from the top and left margins of the content area.(see http://trsg.tcan.ca/stronger-together-network)

Which parameters control this?

Answer 1

Assigning the layout to Body instead of a DIV solved the problem. (In most other scripts I had to use a DIV and using Body caused problems.)

Answer 2

The force layout is designed to distribute items in the available space. When you create a force layout, you set the size of the available area, and the nodes are attracted to the center of the area.

You can either set a smaller area for the network chart or lower the attraction between the nodes and the center, by setting the charge attribute of the force to a greater value. The default value is -30, try with -10 or -5.