Search code examples
timed3.jsscalecubism.js

How to create time scale in d3?


On the top of the horizon chart of the application I inherited it has an time series displays the hour of the day (9pm Fri 3am 6am ...). In the chart it has data volume.From the cubism Wiki it stated that "The context's x-scale; a d3.time.scale. The domain of the scale is updated automatically immediately before a "change" event is dispatched. The range is likewise set automatically based on the context size." The one displays the real-time horizon chart has coffee script:

  *d3.select("#applianceGraphs").call(function(div) {  
    div.append("div").attr("class", "axis").call(context.axis().orient("top"));
  div.selectAll(".horizon").data(generated).enter().append("div").attr      ("class", "horizon").call(context.horizon().height(90));
  return div.append("div").attr("class", "rule").call(context.rule());
  });*

I need to create a chart to reflect the data volume of the day before (9pm Thu 3am 6am ...), that is changing the time series x-scale range? I believe that I can use var x = d3.time.scale().range(range) with the range contains an array of two with the starting date and the end date. What do I need to make cubism/d3 to take the new time.scale?


Solution

  • Looks like the answer can be derived from the following two posts:

    How to update the axis scale on change events in cubism/d3

    Change scale default in cubism.js