cubism.js ось последнего часа

Question

Я пытаюсь построить график в реальном времени, отображающий значения от 0,0 до 1,0 за последний час. Со стороны сервера я возвращаю массив значений, сгруппированных по минутам:

[1.0,1.0,0.0,0.0,1.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,1.0,0.0,0.0,1.0,0.0,0.333333333333333,1.0,1.0,0.0,0.0,0.0,0.0,0.0, 0.25,0.5,1.0,0.0,0.0,1.0,0.0,0.5,0.0,0.0,0.0,1.0,0.5,0.0,1.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,1.0,1.0,0.0, 0.0,1.0,0.0,0.5,0.0,0.5,0.0,1.0,0.0,0.0,0.0]

Вот как это выглядит со стороны моего клиента:

<div id="demo"></div>
<script src="http://square.github.com/cubism/d3.v2.js"></script>
<script src="http://square.github.com/cubism/cubism.v1.js"></script>
<script>
    var context = cubism.context()
            .serverDelay(0)
            .step(60e2)
            .size(1000)
            .stop();

    d3.select("#demo").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("#demo").append("div")
            .attr("class", "rule")
            .call(context.rule());

    d3.select("#demo").selectAll(".horizon")
            .data(["connected_calls"].map(metric))
            .enter().insert("div", ".bottom")
            .attr("class", "horizon")
            .call(context.horizon()

            .format(d3.format("+,.2p")));

    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 metric(name) {
        var format = d3.time.format("%H:%M");
        return context.metric(function(start, stop, step, callback) {
            d3.json("/reports/quality_metrics/" + name, function(rows) {
                var values = []
                rows.forEach(function(d) {
                    values.push(value = d);
                });
                callback(null, values.slice(-context.size()));
            });
        }, name);
    }
</script>
</div>

Вот что я получаю: ссылка на изображение

Я спрашиваю, как масштабировать контекст так, чтобы он соответствовал моей оси?

Спасибо!

Answer 1

var context = cubism.context() .serverDelay(0) .step(60e2) .size([ширина страницы в пикселях]) .stop();