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值= 1440px宽度。根据文档，步骤设置上下文步骤，以毫秒为单位。因此，如果要显示15min = 900000ms，在1440px宽的图形中，您必须使用900000/1440 = 625的步骤。

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

编辑了您的fiddle

无法调整立体主义图D3.js的大小

1 个答案: