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

Question

我对 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 + ")");

有人可以帮助我吗？

Answer 1

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

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

为此，您必须更改 html:

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

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

D3js responsive stacked bar chart - other topics solutions not working

javascript

data-visualization

d3.js