2014-05-14 25 views
5

我爱cubism.js我们用它每天Cubism.js与窗口调整

我定义每个设备利用全屏幕尺寸(手机VS台式机)的自定义大小的图表,我真的很讨厌

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

我是否应该看看其他地方的代码有什么建议?或者如果我应该只处理自定义尺寸?

回答

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> 

因此,所有你需要做的是与大小步骤,那么它应该让你动态地改变立体派的大小。