响应图表 svg

Question

我正在尝试制作响应式图表...我使用了它，但是当我刷新页面时它没有响应，它缩放到合适的宽度...我还有其他想法吗？

我尝试用 viewBox 和 preserveAspectRatio 设置 div.. 但结果相同..

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

好的，感谢 Mark Sizer.. 解决方案在这里：

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( {
 element: document.getElementById("chart"),
 renderer: 'area',
 series: [
  {
   data: seriesData[0],
   color: '#1abc9c'
  }
 ]
} );
var resize = function() {
 graph.configure({
  width: window.innerWidth * 0,
  height: window.innerHeight * 0.20
 });
 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>

响应图表 svg

Responsive CHART svg

javascript

jquery

svg

d3.js

rickshaw