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>