Question

我有一个我在D3.js中创建的svg条形图，我希望水平响应而不是垂直响应。意思是当屏幕尺寸减小时，我希望图形的大小减小宽度，但从不按高度减小。我在jsfiddle中创建了一个小例子，它能够重现我想要解决的问题：SVG changes width, but also height我还附上了下面的代码。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>svg responsive test chart</title>

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

    <style>

    div.svg-container {
        height : 400px;
    }

    </style>

    <script type="text/javascript" src="https://code.jquery.com/jquery-3.1.0.min.js" > </script>
    <script type="text/javascript" src="https://d3js.org/d3.v4.min.js"></script>

</head>
<body>
    <div class="container-fluid">
        <div class="row svg-container">
            <div class="col-sm-6">
                <svg></svg>
            </div>
            <div class="col-sm-6">
                <svg></svg>
            </div>
        </div>
    </div>
</body>

<script type="text/javascript">

    var margin   = { top: 10, right: 10, bottom: 10, left: 10 },
        width    =  $('div.svg-container').width() - margin.left - margin.right,
        height   =  $('div.svg-container').height() - margin.top - margin.bottom;

    d3.selectAll('div.svg-container svg')
      .attr('viewBox', '0 0 ' +  ( width + margin.left + margin.right ) + ' ' + ( height  + margin.top + margin.bottom ) )
      .attr('height', '400px')
      .attr('width', '100%')
      .attr('preserveAspectRatio', 'xMidYMid meet')
      .append('g')
      .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')')
      .append('rect')
      .attr('x', 0 )
      .attr('y', 0 )
      .attr( 'width', width   )
      .attr( 'height', height )
      .attr( 'fill', 'purple' );


</script>

我认为它可能与preserveAspectRatio有关，它保持纵横比，因此迫使它缩小。但是，我想折叠宽度而不是高度。我也跟着上一篇文章how to make svg responsive，它说明了高度硬编码，并将宽度设置为100％，但图形仍然双向折叠。

非常感谢任何帮助。

谢谢！

D3js响应svg宽度但不是高度

0 个答案: