clojurescript - 重新构造: nvd3 graph doesn't respond to when its component's subscriptions are updated

Question

我正在使用 re-frame cljs 框架，该框架使用 reagent 作为其 View 库。我有一个 nvd3 图形组件，我希望在其订阅更新时更新该组件。

不幸的是，在首次调用 :component-did-mount 后，图表永远不会自行更新。 :component-will-update 在初始渲染后永远不会再次调用。

我希望图表能够在订阅通知其正在监​​听的数据发生更改的组件时自行更新。

这是图形容器组件:

(defn weight-graph-container
  []
  (let [weight  (subscribe [:weight-change])
        bodyfat (subscribe [:bodyfat-change])
        weight-amount (reaction (get @weight :amount))
        weight-unit   (reaction (get @weight :unit))
        bf-percentage (reaction (get @bodyfat :percentage))
        lbm           (reaction (lib/lbm @weight-amount @bf-percentage))
        fat-mass      (reaction (- @weight-amount @lbm))]
    (reagent/create-class {:reagent-render weight-graph
                           :component-did-mount (draw-weight-graph @lbm @fat-mass "lb")
                           :display-name "weight-graph"
                           :component-did-update (draw-weight-graph @lbm @fat-mass "lb")})))

这是图形组件:

(defn draw-weight-graph [lbm fat-mass unit]
  (.addGraph js/nv (fn []
                     (let [chart (.. js/nv -models pieChart
                                     (x #(.-label %))
                                     (y #(.-value %))
                                     (showLabels true))]
                       (let [weight-data [{:label "LBM" :value lbm} {:label "Fat Mass" :value fat-mass}]]
                         (.. js/d3 (select "#weight-graph svg")
                                   (datum (clj->js weight-data))
                                   (call chart)))))))

最后，这是图形渲染到的组件:

(defn weight-graph []
  [:section#weight-graph
   [:svg]])

我错过了什么？感谢您的帮助。

Answer 1

以下代码可以解决您的问题:

(defn draw-weight-graph
  [d]
  (let [[lbm fat-mass unit] (reagent/children d)]
    (.addGraph js/nv (fn []
                       (let [chart (.. js/nv -models pieChart
                                       (x #(.-label %))
                                       (y #(.-value %))
                                       (showLabels true))]
                         (let [weight-data [{:label "LBM" :value lbm} {:label "Fat Mass" :value fat-mass}]]
                           (.. js/d3 (select "#weight-graph svg")
                               (datum (clj->js weight-data))
                               (call chart))))))))

(def graph-component (reagent/create-class {:reagent-render weight-graph
                                            :component-did-mount draw-weight-graph
                                            :display-name "weight-graph"
                                            :component-did-update draw-weight-graph}))

(defn weight-graph-container
  []
  (let [weight  (subscribe [:weight-change])
        bodyfat (subscribe [:bodyfat-change])
        weight-amount (reaction (get @weight :amount))
        weight-unit   (reaction (get @weight :unit))
        bf-percentage (reaction (get @bodyfat :percentage))
        lbm           (reaction (lib/lbm @weight-amount @bf-percentage))
        fat-mass      (reaction (- @weight-amount @lbm))]
  (fn []
     [graph-component @lbm @fat-mass "lb"])))