在 NVD3 和 ClojureScript 中为图表设置静态刻度数
Setting static number of ticks for a chart in NVD3 and ClojureScript
我目前正在尝试创建一个图表,在 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 或者我是否正确即使做得正确。有什么想法吗?
找到答案了。要使用 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]))
来实现。
我目前正在尝试创建一个图表,在 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 或者我是否正确即使做得正确。有什么想法吗?
找到答案了。要使用 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]))
来实现。