Accepted answer

I will try to answer your question by showing you examples that work.

  1. The force layout has this particularity that it starts by displaying all the nodes in the upper part of the screen. Since your nodes have no links between them (if they have I don't see it in your code) it's normal that they're drawn on top of each other. You can try to fix this initial render by setting the X and Y attributes of the node to a random position on the screen. As for the floating problem: I am not 100% sure this will work, as I haven't tested it, but you could try applying different forces to your nodes, or at least at the corners of your display window. This will assure that they move and don't get outside of the screen (or use the window's bounding box). Also you need to check some force attributes related to speed and the stability of the layout if you want to be sure the nodes will always move, not just float for some time and remain in a fixed position. For the nodes to be draggable call force.drag as in

  2. This example shows how to present nodes with different shapes in the force layout:

  3. I would suggest the single file version of D3 that usually has a file called d3v2 or something similar...It might that you can not access those files because of a network problem or CORS problem or something similar, meaning the browser will not deliver you the file. You seem to use a very old version of D3 (one year old?). A version that looks more like what you see in the next snippet will probably not throw you that error: If you can't use the online version just download the file and put it in the same directory.

Play with the D3 examples a little bit and read the documentation.

Related Query