Question

我一直在摆弄这个圆环图，但是它不会使用纵横比/视窗框方法正确地渲染。

我使用了一个窗口调整大小功能，但它有一个错误 - 因为它可以折叠容器，它可能会错误地调整大小。我想我可以解决这个问题，但有任何提示可以使用注释掉的代码吗？

根据原始窗口大小，图表的尺寸基于...如果窗口在启动时窗口大小错误，则可能会产生偏差。

  // 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，宽度] x [0，高度]中的图形坐标。这与页面中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')

响应式甜甜圈图d3

1 个答案: