ansprechbar D3 Chart

Ich habe dieses Diagramm D3 - so ziemlich aus dem Kasten heraus. Gibt es eine Möglichkeit, es reaktionsfähig zu machen und Prozentsätze für die Variablen width und height, innerRadius und outerRadius zu verwenden? Ich arbeite auf einer responsiven Website und muss diese abhängig von der Bildschirmgröße/Browsergröße ändern.ansprechbar D3 Chart

jsfiddle hier: http://jsfiddle.net/BTfmH/1/

Code:

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<style type="text/css"> 
html, 
body { 
    margin:0; 
    padding:0; 
    width:100%; 
    height:100%; 
} 

.chart-container { 
/* width:50%; 
    height:50%;*/ 
} 
</style> 
<body> 
<script src="http://d3js.org/d3.v3.min.js"></script> 
<script> 
    var width = 350, 
     height = 350, 
     τ = 2 * Math.PI; 

    var arc = d3.svg.arc() 
     .innerRadius(100) 
     .outerRadius(135) 
     .startAngle(0); 

var svg = d3.select("body").append("svg") 
     .attr("width", width) 
     .attr("height", height) 
    .append("g") 
     .attr("transform", "translate(" + width/2 + "," + height/2 + ")") 

    var background = svg.append("path") 
     .datum({endAngle: τ}) 
     .style("fill", "green") 
     .attr("d", arc); 

    var foreground = svg.append("path") 
    .datum({endAngle: .127 * τ}) 
     .style("fill", "grey") 
     .attr("d", arc); 

setInterval(function() { 
    foreground.transition() 
     .duration(750) 
     .call(arcTween, Math.random() * τ); 
}, 1500); 

    function arcTween(transition, newAngle) { 

    transition.attrTween("d", function(d) { 

     var interpolate = d3.interpolate(d.endAngle, newAngle); 

     return function(t) { 

     d.endAngle = interpolate(t); 

     return arc(d); 
     }; 
    }); 
} 
</script>

Quelle

2013-07-13 TechyDude

möglich Duplikat [Was ist der beste Weg, ein d3.js Visualisierung Layout reaktionsfähiger zu machen?] (Http://stackoverflow.com/questions/9400615/whats-the-best-way-to-make-a-d3 -js-visualization-layout-responsive) – user456584

102

Sie können das Diagramm Resize machen eine Kombination aus viewBox und preserveAspectRatio Attribute auf dem SVG-Element verwendet wird.

Sehen Sie diese jsfiddle für das gesamte Beispiel: http://jsfiddle.net/BTfmH/12/

var svg = d3.select('.chart-container').append("svg") 
    .attr("width", '100%') 
    .attr("height", '100%') 
    .attr('viewBox','0 0 '+Math.min(width,height)+' '+Math.min(width,height)) 
    .attr('preserveAspectRatio','xMinYMin') 
    .append("g") 
    .attr("transform", "translate(" + Math.min(width,height)/2 + "," + Math.min(width,height)/2 + ")");

Sie werden nicht einmal ein resize Handler mit dieser Methode müssen.

Quelle

2013-10-15 11:15:09

DANKE so viel Hilfe für dieses! Ich schätze das besonders, weil es so lange unbeantwortet war! – TechyDude

@TechyDude, Kein Problem - ich brauchte das selbst und sah Ihre Frage. Ich konnte nirgendwo anders eine gute Antwort finden, also habe ich dein Beispiel erweitert. –

@SamSehnert, Danke für die Antwort, ich habe etwas ähnliches hier in https://jsfiddle.net/adityap16/11edxrnq/1/ getan. Aber wenn ich es in React portiere, werden meine Plots sehr klein. Kannst du an irgendeinen Grund denken warum? –

können Sie verwenden window.innerWidth und window.innerHeight die Dimensionen des Bildschirms zu erhalten und Ihr Diagramm entsprechend eingestellt, beispielsweise

var width = window.innerWidth, 
    height = window.innerHeight, 
    innerRadius = Math.min(width,height)/3, 
    outerRadius = innerRadius + 30;

Quelle

2013-07-13 14:26:35

Danke für deine Antwort Lars! Das funktioniert definitiv in Bezug auf die Dimensionierung der Diagramme basierend auf der Fensterseite. Wie würde ich die Größe mit dem Browserfenster ändern? – TechyDude

Sie können die 'onresize' Ereignis verwenden (siehe zum Beispiel [dieser Frage] (http://stackoverflow.com/questions/641857/javascript-window-resize-event)), aber Sie würden sich selbst neu zu zeichnen haben. –

ansprechbar D3 Chart

Antwort

Verwandte Themen