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>

这就是我得到的： image link

我要问的是如何缩放上下文以使其适合我的轴？

谢谢！

Answer 1

var context = cubism.context（） .serverDelay（0）。步骤（60e2） .size（[页面宽度，以像素为单位]） .stop（）;

cubism.js持续时间轴

1 个答案: