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

【问题标题】：Unable to resize Cubism graph D3.js无法调整立体主义图 D3.js 的大小
【发布时间】：2017-11-26 14:50:17
【问题描述】：

我从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 分钟或更短的时间范围？

【问题讨论】：

标签： javascript d3.js cubism.js

【解决方案1】：

大小选项定义图表中显示的值的数量，因此 1440 个值 = 1440px 宽度。根据文档， step 以毫秒为单位设置上下文步骤。因此，如果要显示 15 分钟 = 900000 毫秒，在 1440 像素宽的图形中，您必须使用 900000/1440 = 625 的步长。

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

编辑你的fiddle

【讨论】：