Database Reference
In-Depth Information
5.
First, we'll create the force diagram, as shown here:
(defn create-force [width height]
(-> js/d3 .-layout
(.force)
(.charge -120)
(.linkDistance 30)
(.size (array width height))))
6.
Now, we'll create the SVG element to contain it:
(defn create-svg [width height]
(-> js/d3
(.select "#force svg")
(.attr "width" width)
(.attr "height" height)))
7.
With the force diagram, we need to set the nodes and edges and start the animation:
(defn start-force [force graph]
(-> force
(.nodes (aget graph "nodes"))
(.links (aget graph "links"))
.start))
8.
We also need to create the lines for the edges and the circles for the nodes:
(defn create-links [svg graph]
(-> svg
(.selectAll "line.link")
(.data (aget graph "links"))
(.enter)
(.append "line")
(.attr "class" "link")
(.style "stroke-width"
#(.sqrt js/Math (inc (aget % "value"))))))
(defn create-nodes [svg force color graph]
(-> svg
(.selectAll "circle.node")
(.data (aget graph "nodes"))
(.enter)
(.append "circle")
(.attr "class" "node")
(.attr "r" 5)
(.attr "data-n" #(aget % "n"))
(.style "fill" #(color (aget % "group")))
(.call (aget force "drag"))))
