带有窗口大小调整的 Cubism.js答案

【问题标题】：Cubism.js with window resize带有窗口大小调整的 Cubism.js
【发布时间】：2014-07-03 03:25:22
【问题描述】：

我喜欢 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);

这是预期的外观：

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

【问题讨论】：

标签： cubism.js

【解决方案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>

因此，您需要做的就是使用尺寸的哪一步，然后它应该允许您动态更改立体派的尺寸。

【讨论】：