d3.js - tabla sensible D3
responsive-design (2)
Tengo este gráfico D3, casi fuera de la caja. ¿Hay alguna manera de hacerlo receptivo y usar porcentajes para las variables de ancho y alto, innerRadius y outerRadius? Estoy trabajando en un sitio sensible y necesito que esto cambie en función del tamaño de la pantalla / tamaño del navegador.
jsfiddle aquí: http://jsfiddle.net/BTfmH/1/
Código:
<!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>
Puede hacer que el diagrama viewBox de tamaño usando una combinación de viewBox y preserveAspectRatio en el elemento SVG.
Vea este jsfiddle para ver el ejemplo completo: 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 + ")");
Ni siquiera necesitará un controlador de cambio de resize con este método.
Puede usar window.innerWidth y window.innerHeight para obtener las dimensiones de la pantalla y configurar su gráfico en consecuencia, por ejemplo
var width = window.innerWidth,
height = window.innerHeight,
innerRadius = Math.min(width,height)/3,
outerRadius = innerRadius + 30;