cubsm.js最后一个小时轴



我正在尝试构建一个实时图表,显示上一小时从0.0到1.0的值。从服务器端,我返回一个按分钟分组的值数组:

[1.0,1.0,0.0,0.0,1.0:0.0,0.0.0,0.00,0.0,0.00,1.0,0.01,3.0,0.0,3333333,1.0,0,0.0,0.25,0.5,1.0,0.0.0,1.0,0.0.,0.0,0.0.0,0.0,0.0.0,.0,0.00,.0,0.5,0.0,0.0,.0,0.01,.0,0.0.0.0,0.0,1.0,1.00,1.0,1.00,0.00,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>

这就是我得到的:图像链接

我要问的是如何缩放上下文,使其符合我的轴?

谢谢!

var context=cubism.context().serverDelay(0).步骤(60e2).size([页面宽度(像素)]).stop();

最新更新