C3JS neu zeichnen, wenn DIV in der Größe geändert wird

Question

Ich verwende eine einfache JQuery- und CSS-Methode, um eines meiner Diagramm-DIVs zu skalieren, wenn Sie auf das DIV klicken. Der DIV wird auf 100% der Seite angepasst.

Eine Probe ist hier (oder überprüfen Sie meine Fiddle):

$('.col-sm-6').on('click', function() { 
 
\t \t \t $(this).toggleClass('clicked'); 
 
\t \t });

.col-sm-6 { 
 
\t \t \t width: 68%; 
 
\t \t \t transition: width 2s !important; 
 
     height: 100px; 
 
     width: 100px; 
 
     background: #ffffff; 
 
\t \t } 
 
\t \t .col-sm-6.clicked { 
 
\t \t \t z-index: 9999; 
 
\t \t \t width: 100%; 
 
\t \t \t height: 100%; 
 
\t \t \t position: fixed; 
 
\t \t \t top: 25px; 
 
\t \t \t left: 0px; 
 
\t \t }

<script src="http://code.jquery.com/jquery-1.10.2.js"></script> 
 
<div class="col-sm-6" style="border:1px solid black">CLICK</div>

Wie gehe ich über das Diagramm svg Ändern der Größe, die innerhalb der "col-sm-6" enthalten ist DIV im obigen Beispiel, wenn der DIV in der Größe geändert wird (und wieder zurück)? Es sieht so aus, als wenn die Größe nur geändert wird, wenn sich das eigentliche Browserfenster ändert, nicht nur das DIV.

Würde ich die onresize() Funktion in C3JS verwenden?

Answer 1

sollten Sie c3.js API .resize() Methode verwenden:

chart.resize({ 
    height: 640, 
    width: 480 
}); 

example hier.

---

Sie erwähnten onresize() - dieser Rückruf auf der Webseite nur die Größe ist, und es nicht Feuer nach .resize()

Answer 2

Für alle, die in Zukunft das gleiche Problem hat, hier ist meine Lösung:

$('#resize').on('click', function(){ 
    setTimeout(function() { 
     chart5.resize({ 
     height: $("#election-stat-chart-05").height(), 
     width: $("#election-stat-chart-05").width() 
     }); 
    }, 500); 
}); 

das snippet Siehe unten:

$(function() { 
 

 
    // Initial chart 
 
    var chart = c3.generate({ 
 
     data: { 
 
      columns: [ 
 
       ['data1', 30, 20, 50, 40, 60, 50], 
 
       ['data2', 200, 130, 90, 240, 130, 220], 
 
       ['data3', 300, 200, 160, 400, 250, 250] 
 
      ], 
 
      type: 'bar' 
 
     }, 
 
     bindto: '#election-stat-chart-05', 
 
    }); 
 
\t 
 
    $('#resize').on('click', function(){ 
 
     setTimeout(function() { 
 
      chart.resize({ 
 
       height: $("#election-stat-chart-05").height(), 
 
       width: $("#election-stat-chart-05").width() 
 
      }); 
 
     }, 500); 
 
    }); 
 
}); 
 
/*-------------------*/ 
 
$('#resize').on('click', function(){ 
 
    $('.col-sm-6').toggleClass('resize');   
 
});

.col-sm-6 { 
 
    width: 68%; 
 
    /*transition: width 1s !important;*/ 
 
} 
 
.col-sm-6.resize { 
 
    z-index: 9999; 
 
    width: 100%; 
 
    height: 300px; 
 
    position: fixed; 
 
    top: 25%; 
 
    left: 0px; 
 
}

<script src="http://code.jquery.com/jquery-1.10.2.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.css" rel="stylesheet" /> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.js"></script> 
 
<div class="col-sm-6"> 
 
    <div id="chart-05"> 
 
    <div class="keen-dataviz"> 
 
     <div class="keen-dataviz-title">Absentee Ballots by Precinct 
 
     <div style="float:right;"><a id="resize">CLICK TO RESIZE</a> 
 
     </div> 
 
     </div> 
 
     <div class="keen-dataviz-stage"> 
 
     <div id="election-stat-chart-05" style="margin-right: 10px; max-height: 223px; position: relative;"> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Ich habe meine Fiddle ebenfalls aktualisiert.