无法调整立体主义图D3.js的大小

Question

I got the cubism code from the Cubism Demo . The timeframe by default in the demo code is 4 hours. I'm trying to reduce it to 15 min. I successfully modified the option to make it 15 min but the graph got shrinked.

Here is the JavaScript code :

var context = cubism.context()
    .step(10000)
    .size(1440); // Modified this to 90 to make it 15 min 

d3.select("body").selectAll(".axis")
    .data(["top", "bottom"])
  .enter().append("div")
    .attr("class", function(d) { return d + " axis"; })
    .each(function(d) { d3.select(this).call(context.axis().ticks(12).orient(d)); });

d3.select("body").append("div")
    .attr("class", "rule")
    .call(context.rule());

d3.select("body").selectAll(".horizon")
    .data(d3.range(1, 3).map(random))
  .enter().insert("div", ".bottom")
    .attr("class", "horizon")
    .call(context.horizon().extent([-10, 10]));

context.on("focus", function(i) {
  d3.selectAll(".value").style("right", i == null ? null : context.size() - i + "px");
});

// Replace this with context.graphite and graphite.metric!
function random(x) {
  var value = 0,
      values = [],
      i = 0,
      last;
  return context.metric(function(start, stop, step, callback) {
    start = +start, stop = +stop;
    if (isNaN(last)) last = start;
    while (last < stop) {
      last += step;
      value = Math.max(-10, Math.min(10, value + .8 * Math.random() - .4 + .2 * Math.cos(i += x * .02)));
      values.push(value);
    }
    callback(null, values = values.slice((start - stop) / step));
  }, x);
} 

Here is the demo .

How to display 15 min or lower time frame in Cubism graph?

Answer 1

Size option defines the number of values shown in the graph so 1440 values = 1440px width. According to the docs, step set the context step in milliseconds. So, if you want to display 15min = 900000ms, in a graph that is 1440px wide you have to use a step that is 900000/1440 = 625.

var context = cubism.context()
   .step(625)
   .size(1440);

Edited your fiddle