graphique D3 réactif
J'ai ce tableau D3-à peu près hors de la boîte. Existe-t-il un moyen de le rendre réactif et d'utiliser des pourcentages pour les variables de largeur et de hauteur, innerRadius et ouerradius? Je travaille sur un site réactif et j'en ai besoin pour changer en fonction de la taille de l'écran/de la taille du navigateur.
Jsfiddle ici: 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>
2 réponses
Vous pouvez redimensionner le graphique en utilisant une combinaison d'attributs viewBox et preserveAspectRatio sur L'élément SVG.
Voir ce jsfiddle pour l'exemple complet: 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 + ")");
Vous n'aurez même pas besoin d'un gestionnaire resize avec cette méthode.
Vous pouvez utiliser window.innerWidth et window.innerHeight pour obtenir les dimensions de l'écran et configurer votre graphique en conséquence, par exemple
var width = window.innerWidth,
height = window.innerHeight,
innerRadius = Math.min(width,height)/3,
outerRadius = innerRadius + 30;