That reminds me, now that I've switched from Om/Sablono to Reagent, I should rebuild that example repo using Reagent too. Here's what we have for D3 at work (in our graphing test harness). The NVD3 code is almost identical.
(defn base-d3-test
"Component that renders basic D3 placeholder.
We deref the state here so that Reagent knows we're interested in
changes to it, even tho' we only actually use them in the metadata
functions we add below."
[]
(let [graph (:data/text @data/app-state)]
[:div {:style {:height 400 :float "right" :width "50%"}
:id "d3-node"}]))
(def d3-test
"Component that adds line drawing to placeholder."
(with-meta base-d3-test
{:component-did-mount
(fn [this]
(line-graph (data/make-target (:data/text @data/app-state))))
:component-did-update
(fn [this old-state]
(when (data/graph-data-changing old-state @data/app-state)
(.. js/document (getElementById "d3-node") -firstChild remove)
(line-graph (data/make-target (:data/text @data/app-state)))))}))
(That's slightly modified from what a direction translation of om-sente would
be I suspect but is still pretty close)
Sean
On Sep 9, 2014, at 8:05 AM, Ryan Brush <[email protected]> wrote:
> I found an example of using D3 with Om at [1] which I used as a basis for a
> Reagent-based code at [2]. This is little more than a messy experiment now
> but it works. (Translation: don't judge my horrible code. ;)
>
> In short, the pattern was to use Reagent or Om to produce a placeholder node
> during the render phase, then actually render the D3 visualization during
> component-did-mount and component-did-update. You can plug into those with
> Reagent using reagent/create-class rather than a simple function, which can
> be seen at [2].
>
> I haven't bothered getting smooth D3 transitions going with this, but that
> should be possible as well.
>
> [1]
> https://github.com/seancorfield/om-sente/blob/master/src/cljs/om_sente/core.cljs#L262
>
> [2]
> https://github.com/rbrush/clara-tools/blob/master/src/main/clojurescript/clara/tools/apps/logicview/graph.cljs#L74
signature.asc
Description: Message signed with OpenPGP using GPGMail
