モバイルビューでd3ドーナツチャートが完全に表示されない

Question

d3ドーナツチャートを使用してデータを表示していますが、モバイルビューに切り替えるとグラフが正しく表示されません。全体のドーナツと詳細はモバイルビューで表示されますか？

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);

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

Answer 1

私は、ページがレンダリングされるときに、一度あなたのチャートのサイズを設定していると仮定します。

あなたのチャートが応答するためにサイズ変更するに耳を傾ける必要がある静的な値を設定する： https://api.jquery.com/resize/ （たぶんのみ再レンダリングをサイズ変更が終了したとき： jQuery - how to wait for the 'end' of 'resize' event and only then perform an action?）

が、私は「チャート・時間の関係が届きません

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

：-spent」とあなたの 『チャート全ユーザー』

私はブートストラップとD3を持つバイオリンだけでなく、あなたの基本変数を設定しました3210

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

問題が解決しない場合は、問題を解決してください。