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>

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