Responsive CHART svg

Question

J'essaye de faire le graphique sensible ... j'ai utilisé ceci mais il n'est pas sensible juste quand je rafraichis la page il a mis à l'échelle à la bonne largeur ... D'autres idées alors j'ai eu?

Et je tente de mettre un div avec viewBox et preserveAspectRatio .. Mais le même résultat ..

var graph = new Rickshaw.Graph({ 
 
    element: document.querySelector("#chart"), 
 
    height: 100, 
 
    series: [{ 
 
     color: '#1abc9c', 
 
     data: [ 
 
      { x: 0, y: 50 }, 
 
      { x: 1, y: 50 }, 
 
      { x: 2, y: 40 }, 
 
      { x: 3, y: 40 }, 
 
      { x: 4, y: 30 }, 
 
      { x: 5, y: 20 }, 
 
      { x: 6, y: 0 }, 
 
      { x: 7, y: 0 } ] 
 
    }] 
 
}); 
 
    
 
graph.render(); 
 

 
var svg = d3.select('.chart-container').append("svg") 
 
    .attr("width", '100%') 
 
    .attr("height", '100%') 
 
    .attr('viewBox','0 0 '+Math.min(width,height)+' '+Math.min(width,height)) 
 
    .attr('preserveAspectRatio','xMinYMin') 
 
    .append("g") 
 
    .attr("transform", "translate(" + Math.min(width,height)/2 + "," + Math.min(width,height)/2 + ")");

<div class="chart-container" id="chart"></div>

Answer 1

Ok merci à Mark Sizer .. Solution est ici:

var seriesData = [ [ 
 
      { x: 0, y: 50 }, 
 
      { x: 1, y: 50 }, 
 
      { x: 2, y: 50 }, 
 
      { x: 3, y: 40 }, 
 
      { x: 4, y: 40 }, 
 
      { x: 5, y: 20 }, 
 
      { x: 6, y: 0 }, 
 
      { x: 7, y: 0 } ] ]; 
 
var graph = new Rickshaw.Graph({ 
 
\t element: document.getElementById("chart"), 
 
\t renderer: 'area', 
 
\t series: [ 
 
\t \t { 
 
\t \t \t data: seriesData[0], 
 
\t \t \t color: '#1abc9c' 
 
\t \t } 
 
\t ] 
 
}); 
 
var resize = function() { 
 
\t graph.configure({ 
 
\t \t width: window.innerWidth * 0, 
 
\t \t height: window.innerHeight * 0.20 
 
\t }); 
 
\t graph.render(); 
 
} 
 
window.addEventListener('resize', resize); 
 
resize();

<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/rickshaw/1.5.1/rickshaw.js"></script> 
 

 

 
<div id="chart"></div>