I will try to answer your question by showing you examples that work.
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 http://bl.ocks.org/1095795
This example shows how to present nodes with different shapes in the force layout: http://bl.ocks.org/1062383.
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.
- Writing simple force layout app using D3.js
- Simple graph of nodes and links without using force layout
- D3 force layout visualization dead slow when using a large dataset?
- D3: Using force layout for word clouds
- Saving and reloading a force layout using d3.js
- How can I show a graph using d3 force layout with initial positions set and no movement at all?
- Center force directed layout after tick using root node (return to center)
- reading nodes and edges from two distinct csv files using Force Layout
- Recreating collapsible force layout using d3 v4
- how to generate a network graph with edge weight using D3.js force layout
- Recreate Cluster Force Layout using d3 v4.0
- How to pan to a node using d3's force layout
- Avoid links criss cross / overlap in d3.js using force layout
- D3 force layout differences between v3 and v4 when using mutliple connected components
- Can't draw links by node property using D3 force layout
- Using data(...) in D3 force layout to update the graph
- Using multiple datasets for a given D3 force layout
- Position circles on a horizontal axis without overlapping using force layout
- Using Drop-down menu with D3 force layout graph
- D3.js v4 force layout with link forces causes strange movement when using drag behavior
- Getting D3 static tree diagrams by using force layout
- Modifying a Force Layout - using indexes rather than references gives TypeError
- Adding nodes inside svg rect using d3 force layout
- Fading certain images in force layout using d3.js
- How to update a data of a node in d3 force layout using react
- Can a Child node have multiple Parent nodes in Collapsible Force Layout using D3
- Using D3 to make a colored force layout
- Getting bound data without d3 info when using Force Layout
- Is there a way to zoom into a D3 force layout graph?
- Fix Node Position in D3 Force Directed Layout
More Query from same tag
- D3.js ordinal multi-series line chart: Nan at path
- D3: replacing anonymous function with a named one
- How do I control the links in my D3 tree?
- Browser hangs when parsing dates
- Victory Chart x-axis scale not working for Dates
- Custom styling for the d3 treemap tooltip
- d3.js graph code creating extra nodes
- dc.js: Multiple graphs in a single dimension
- How can I wrap long text labels with D3.js?
- How to display custom tooltips on line chart using Rickshaw Library
- How to wire path/chart redraw after y domain changes
- Zoom to domain with intervals
- Modify lines/tooltip on hover
- abbreviated month format for x-axis in d3.js
- Not able to display all XAxis tick values in NVD3
- D3js Tree Diagram NaN x value
- Querying MongoDB from browser using a flask backend
- D3.js: How to keep marker and text on same position when zooming in and out
- How animate D3 SVG bezier line for subtle wave effect
- D3 Sequence Sunburst Chart on Shiny
- Center visualization in viewbow D3
- Parsing date with milliseconds in d3js
- D3 unable to select two elements in mouseover
- Legend titles in D3
- Formatting scientific, with fixed number of decimals
- d3 filling an area with a gradient
- How to fix graph so it doesn't write over itself when resizing
- Drawing a graph with images and arrows with d3 issues