Cubism.js与窗口调整大小

时间:2014-05-14 21:23:29

标签: cubism.js

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

这就是预期的样子:

enter image description here

有关我是否应该查看代码中的其他位置的任何建议?或者我是否应该处理自定义尺寸?

1 个答案:

答案 0 :(得分:0)

我不确定这是否适合您,但您可能想尝试一下。

正如我所说,我一直在玩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>

所以你需要做的就是使用大小的步骤然后它应该允许你动态地改变立体主义的大小。