2016-06-23 13 views
1

我正在尝试创建一个图表,在x轴上显示以星期一开始的星期几,并在y轴上显示星期(即1月15日,1月22日等)在NVD3和ClojureScript中为图表设置静态数量的刻度

我无法让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像我这样做与x轴设定为scale(x),但我不知道如果我所有的语法为ClojureScript是正确的在D3或如果我甚至做得正确。有任何想法吗?

回答

1

找出答案。为了与您需要确保所有的nvd3 "options"的格式化这样clojurescript操纵nvd3:

(. 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.))) 

它们不能被放在让[]。

所以要回答最初的问题 - 可以用(.chart (forceX #js [yourRange]))来实现。