キュービズムグラフのサイズを変更できませんD3.js

Question

Cubism Demoからキュービズムコードを取得しました。デモコードのデフォルトの時間枠は4時間です。私はそれを15分に減らそうとしています。私はそれを15分にするオプションを変更しましたが、グラフは縮小しました。ここで

は、JavaScriptコードである：ここで

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); 
} 

はdemoです。

キュービズムグラフで15分以下の時間枠を表示するにはどうすればよいですか？

Answer 1

サイズオプションは、グラフに表示される値の数を定義します。したがって、1440値= 1440ピクセル幅です。ドキュメントによれば、文脈のステップをミリ秒単位で設定する。 あなたが15分を表示したいのであれば、= 900000msは、広い1440pxあるグラフに、あなたのfiddle

を編集1440分の900000 = 625

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

あるステップを使用する必要があります