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响应式堆积条形图 - 其他主题解决方案无效

1 个答案: