響應式甜甜圈圖d3

Question

我已用擺弄為位這個圓環圖，但使用的縱橫比/視框方法也不會呈現恰到好處 。

我使用了窗口調整大小功能，但是有一個錯誤-由於可以折疊它的容器，它的大小可能不正確。 我認為我可以解決此問題，但是有關將其與注釋掉的代碼一起使用的任何提示嗎？

趨向於發生的事情是，基於原始窗口的大小，圖表具有基於該大小的尺寸...如果窗口在啟動時大小不正確，則可能會使外觀傾斜。

https://jsfiddle.net/7rgf09x1/9/

  // WORK IN PROGRESS: Responsive using only d3.
  //     var svg = d3.select('#revenue-chart').append('svg')
        // .attr('id', 'revenue-chart-render')
  //     .attr("width", '100%')
  // .attr("height", '100%')
  // .attr('viewBox','0 0 '+Math.min(width,height)+' '+Math.min(width,height))
  // .attr('preserveAspectRatio','xMinYMin')
  // .attr("transform", "translate(" + Math.min(width,height) / 2 + "," + Math.min(width,height) / 2 + ")");

Answer 1

viewBox的目標是將頁面坐標與圖形坐標分開。 因此， .attr('viewBox','0 0 '+width +' '+height)為您提供圖形坐標[0，width] x [0，height]。 這與頁面中svg的大小無關。 您可以更改'0 0'以使圖形坐標的原點位於中心而不是左上角（盡管使用g轉換的解決方案也是有效的）。 最后， preserveAspectRatio通過在必要時在邊上添加填充來確保圖像不會被拉伸。

所以總的來說這應該給你

 var svg = d3.select('#revenue-chart').append('svg')
         .attr('id', 'revenue-chart-render')
         .attr("width", '100%')
         .attr("height", '100%')
         .attr('viewBox',(-width / 2 ) + ' ' + (-height/2) + ' '+width +' '+height)
         .attr('preserveAspectRatio','xMinYMin')