d3 Donut-Diagramm nicht vollständig sichtbar, wenn in der mobilen Ansicht

Question

Ich zeige einige Daten mit D3 Donut-Diagramm wie unten gezeigt, aber wenn ich auf mobile Ansicht wechseln, Diagramm ist nicht richtig sichtbar, wie kann ich es funktionieren oder es zeigen lassen ganzer Donut und Details in der mobilen Ansicht?

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

Ich nehme an, Sie Einstellung einmal die Größe des Diagramms, wenn die Seite gerendert wird.

Wenn statische Wert Einstellung, die Sie hören müssen, um die Größe Ihres Diagramms reaktionsfähiger zu machen: https://api.jquery.com/resize/ (Vielleicht rerender nur, wenn Resize endet: jQuery - how to wait for the 'end' of 'resize' event and only then perform an action?)

Ich bin nicht die Beziehung zwischen „Chart-Zeit bekommen -spent“und Ihr "Chart-total-Benutzer"

ich eine Geige mit Bootstrap und d3 sowie Ihre Basisvariablen auf:

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

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

Wenn die Größenänderung Ihr Problem nicht löst, versuchen Sie es dort zu beschreiben.