无法调整立体派图D3.js

我从Cubism Demo的立体派码。演示代码默认的时间范围是4小时。我试图把它缩短到15分钟。我成功修改了15分钟的选项，但图形缩小了。无法调整立体派图D3.js

下面是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分钟或更低的时间帧？

来源

2017-06-23 iJade

大小选项定义图中显示的值的数量，因此1440值= 1440px宽度。根据文档，步骤以毫秒为单位设置上下文步骤。所以，如果你想显示15分钟= 900000ms中，这是一个图形1440px宽，你必须使用一个步骤就是1440分之900000= 625

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

编辑您的fiddle

来源

2017-06-23 10:29:51

无法调整立体派图D3.js

回答

相关问题