javascript - 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>