可调整窗口大小的Cubism.js

Question

我喜欢cubism.js，我们每天都在用它

我正在为每个设备定义自定义大小的图表，以利用全屏大小(手机和台式机)，这是我真的很讨厌的

我从其他堆栈溢出问题中了解到，无论何时调整窗口大小，都可以执行以下操作来调整图表的大小：

chart = $('#chart');
$(window).on('resize', function() {
    var targetWidth = chart.parent().width();
    chart.attr('width', targetWidth);
    // can we change cubism's context size too?
});

但我也知道这对于立体主义是不可能的，因为我们最初在上下文中设置大小：

context = cubism.context().step(60 * 1000).size(780);

这是预期的样子：

​

​

关于我是否应该在代码中查看其他地方，有什么建议吗？或者我应该只处理定制的尺寸？

Answer 1

我不确定这对你是否有效，但你可能想试一试。

所以就像我说的，我一直在玩cubism.js，发现我实际上能够创作这个步骤，因此我也会假设/选择相信，从逻辑上讲，也可以通过这样做来创作立体主义的大小：

JS：

// Initialize the step menu's selection.
d3.selectAll("#step option").property("selected", function() {
    return this.value == step;
});

// Update the location on step change.
d3.select("#step").on("change", function() {
    window.location = "?step=" + this.value + "&" + location.search.replace(/[?&]step=[^&]*(&|$)/g, "$1").substring(1);
});

//to alter the step
var step = +cubism.option("step", 864e5);

var context = cubism.context() // set the cubism context
.step((step))
.size(1440);

HTML：

<select id="step">
    <option value="36e5">Hours</option>
    <option value="864e5">Days</option>
</select>

所以你需要做的就是使用大小的哪一步，然后它应该允许你动态地改变立方空间的大小。