2014-05-14 5 views
5

I cubism.js lieben, und wir benutzen es jeden TagCubism.js mit Fenstergröße ändern

ich benutzerdefinierte Größentabellen für jedes Gerät bin definieren Verwendung des Vollbildgröße (Telefon vs Desktop), die ich wirklich zu hassen

ich weiß aus anderen Stack-Überlauf Fragen, die Sie das Diagramm die folgenden, um die Größe tun können, wenn die Größe des Fensters:

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

aber ich weiß auch, dass dies für cubism nicht möglich ist, weil, wie wir anfänglich die Größe im Kontext:

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

Dies ist, wie es aussehen würde, was erwartet wird:

enter image description here

Irgendwelche Vorschläge, ob ich in den Code schauen woanders sollte? oder wenn ich einfach mit den kundenspezifischen Größen umgehen sollte?

Antwort

0

Ich bin nicht sicher, ob dies für Sie funktioniert oder nicht, aber Sie möchten es vielleicht versuchen.

Also, wie ich schon sagte, ich habe mit cubism.js herumgespielt und herausgefunden, dass ich tatsächlich in der Lage bin, den Schritt zu schreiben, also werde ich auch annehmen/wählen, dass es logisch ist, auch das zu verfassen Größe des Kubismus durch dies zu tun:

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> 

Also alles, was Sie tun müssen, ist, die mit der Größe Schritt dann sollte es Ihnen ermöglichen, um die Größe des Kubismus dynamisch zu verändern.