Database Reference
In-Depth Information
9.
The
tick
handler transfers the animation from the force chart's objects to the SVG
elements, displaying them:
(defn on-tick-handler [link node]
(fn []
(-> link
(.attr "x1" #(-> % .-source .-x))
(.attr "y1" #(-> % .-source .-y))
(.attr "x2" #(-> % .-target .-x))
(.attr "y2" #(-> % .-target .-y)))
(-> node
(.attr "cx" #(aget % "x"))
(.attr "cy" #(aget % "y")))))
10. We'll add a
title
element to the nodes for a tooltip:
(defn set-title [node]
(-> node
(.append "title")
(.text #(aget % "name"))))
11. Now, we use all of these to render the graph. We'll also save the input graph that we
are visualizing. We'll query this to make the visualization interactive in the next recipe,
Creating interactive visualizations with D3
. If you don't care about that, you can
remove the call to
swap!
:
(def census-graph (atom nil))
(defn render-graph [color force svg graph]
(swap! census-graph (fn [] graph))
(start-force force graph)
(let [link (create-links svg graph)
node (create-nodes svg force color graph)]
(set-title node)
(.on force "tick" (on-tick-handler link node))))
12. Here's the function that we'll export. It makes the AJAX call to download the JSON,
creates the base objects, and calls
render-graph
:
(defn ^:export force-layout []
(let [width 650, height 500]
(.json js/d3 "force/data.json"
(partial
render-graph
(.category20c (aget js/d3 "scale"))
(create-force width height)
(create-svg width height)))))
