D3js响应堆叠条形图-其他主题解决方案不起作用

D3js responsive stacked bar chart - other topics solutions not working

本文关键字：解决方案 不起作用 其他 响应 条形图 D3js      更新时间：2023-09-26

我对D3和javascript相当陌生。非常有用的图书馆，不过。但我很难让我的堆叠条形图（我从D3js.org网站上得到代码）做出响应。事实上，当我从头开始的时候，我很难让各种D3图表做出响应。

我尝试使用viewbox属性和preserveAspectRatio，但我可能做错了。

这是我的全部代码：http://codepen.io/voltdatalab/pen/avMoMx

var svg = d3.select("graph").append("svg")
    .attr("width", "100%")
    .attr('preserveAspectRatio','xMinYMid')
    .attr('viewBox','0 100% '+Math.min(width,height)+' '+Math.min(width,height))
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

有人能帮我一下吗？

您需要首先设置viewbox属性。试试这个：

var svg = d3.select("#chart").append("svg")
    .attr("viewBox", "0 0 " + (width) + " " + (height))
    .attr("preserveAspectRatio", "xMinYMin");

要想做到这一点，你必须更改你的html:

<div id="chart"></div>
相关文章：