在 NVD3 和 ClojureScript 中为图表设置静态刻度数答案

【问题标题】：Setting static number of ticks for a chart in NVD3 and ClojureScript在 NVD3 和 ClojureScript 中为图表设置静态刻度数
【发布时间】：2016-06-23 17:48:24
【问题描述】：

我目前正在尝试创建一个图表，在 x 轴上显示从星期一开始的星期几，在 y 轴上显示星期（即 1 月 15 日、1 月 22 日等）

我无法让 x 轴始终显示 7 天。例如，如果我的数据只有有一条星期一的数据，我希望所有 7 天都出现在轴上。

这是我目前所拥有的：

(defn bubble-chart [a] 
  (.addGraph js/nv (fn []
                     (let [chart          (.. js/nv -models scatterChart)
                           width          500
                           x              (doto (js/d3.time.scale.) (.domain #js [0 6]) (.range #js [0 width]))
                           formatWeekFunc (.. js/d3 -time (format "%b %d"))
                           week           ["Mon" "Tues" "Wed" "Thurs" "Fri" "Sat" "Sun"]]

                       (.. chart -xAxis 
                           (scale x)
                           (axisLabel "Day of the week") 
                           (ticks 7)
                           ;(tickSize 16 0)
                           (tickValues #js [0 1 2 3 4 5 6])
                           (tickFormat (fn [d] (nth week d))))


                       (. chart (yScale (js/d3.time.scale.utc.)))
                       (.. chart -yAxis 
                           (axisLabel "Week") 
                           (ticks (.. js/d3 -time -monday) 1)
                           (tickFormat (fn [d] (formatWeekFunc (js/Date. d)))))


                     (let [my-data @a]
                         (println (str "my-data " my-data))
                         (.. js/d3 (select "#testDiv svg")

                             (datum (clj->js my-data))
                             (call chart)))))))

我知道我应该像我一样使用x 并将xAxis 设置为scale(x)，但我不确定我的所有语法对于D3 中的ClojureScript 是否正确，或者我是否正确执行。有什么想法吗？

【问题讨论】：

标签： javascript d3.js clojure nvd3.js clojurescript

【解决方案1】：

想出了答案。要使用 clojurescript 操作 nvd3，您需要确保所有 nvd3 "options" 的格式如下：

(. chart (forceX #js [0 1 2 3 4 5 6]))
(.. chart -xAxis 
    (axisLabel "Day of the week") 
    (tickValues (.range js/d3 0 6 1))
    (tickFormat (fn [d] (nth week d))))

;(. chart (yRange #js [chart.height 0]))
(. chart (yDomain #js [chart.height 0]))
(. chart (yScale (js/d3.time.scale.utc.)))

它们不能放在 let[] 中。

所以回答原始问题 - 可以通过(.chart (forceX #js [yourRange])) 来实现。

【讨论】：