在移动视图中，d3圆环图不完全可见

Question

我正在使用d3圆环图显示一些数据，如下所示，但是当我切换到移动视图时，图表无法正常显示如何使其工作或使其在移动视图中显示整个甜甜圈和详细信息？

＆＃13;

＆＃13;

  var width = $(".chart-time-spent").width(), height = 250, radius = Math.min(width, height) / 2, legendPosY = (height / 2) - 20;
    
            var color = d3.scale.ordinal().range(["#99ecf0", "#1cb5bb", "#10538c", "#75c6f3", "#60d3ff", "#4ec3d7", "#37c2a5", "#8bcb6b"]);
            var API = apiUrl+"getDeviceCounters";


            console.log("deviceController api_> "+API);

            var arc = d3.svg.arc().innerRadius(radius - 20).outerRadius(radius - 60);
            var arcOver = d3.svg.arc().outerRadius(radius - 18).innerRadius(radius - 62);
          
            var pie = d3.layout.pie().sort(null).value(function (d) { return parseInt(d.time); });
           
            
            var svg = $rootScope.getDonutSVG(".chart-time-spent", width, height);

＆＃13;

  <div class="col-md-6 col-xs-12 chart-total-users"></div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

我假设您在呈现页面时设置了一次图表的大小。

设置静态值时，您需要收听调整大小以使图表响应： https://api.jquery.com/resize/ （也许只有在调整大小结束时才会重新渲染： jQuery - how to wait for the 'end' of 'resize' event and only then perform an action?）

我没有得到＆＃34;图表时间花费＆＃34;和你的＆＃34;图表 - 总用户＆＃34;

我设置了一个具有Bootstrap和d3的小提琴以及你的基本变量：

var width = $(".chart-time-spent").width(),
    height = 250,
    radius = Math.min(width, height) / 2,
    legendPosY = (height / 2) - 20;

https://jsfiddle.net/772n9mrn/6/

如果调整大小无法解决您的问题，请尝试在那里进行描述。