responsive D3 grafiği

Bu D3 grafiğime sahibim - kutunun hemen dışında. Genişlik ve yükseklik değişkenleri, innerRadius ve outerRadius için duyarlılık kazandırmak ve yüzdelerini kullanmak için bir yol var mı? Duyarlı bir sitede çalışıyorum ve ekran boyutuna/tarayıcı boyutuna göre değiştirmek için buna ihtiyacım var. Buradaresponsive D3 grafiği

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

Kodu:

<!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>

kaynak

2013-07-13 TechyDude

olası bir kopyası [Bir d3.js görselleştirme düzenini yanıtlamanın en iyi yolu nedir?] (Http://stackoverflow.com/questions/9400615/whats-the-best-way-to-make-a-d3 -js-görselleştirme-düzen-duyarlı) – user456584

102

Sen SVG elemana viewBox ve preserveAspectRatio niteliklerini bir arada kullanarak grafik yeniden boyutlandırma yapabilirsiniz.

tam örneğin bu jsfiddle bakınız: 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 + ")");

Hatta bu yöntemle bir resize işleyicisi gerek yoktur.

kaynak

2013-10-15 11:15:09

TEŞEKKÜR EDERİZ! Özellikle bu kadar uzun süre cevapsız/boş olduğundan beri bunu takdir ediyorum! – TechyDude

@TechyDude, Sorun değil — buna kendim ihtiyacım vardı ve soruyu gördüm. Başka bir yerde iyi bir cevap bulamadım, bu yüzden örneklerinizi genişletin. –

@SamSehnert, Cevabınız için teşekkürler, https://jsfiddle.net/adityap16/11edxrnq/1/ burada benzer bir şey yaptım. Ama React'ta taşıdığımda, arazilerim gerçekten küçük oluyor, neden herhangi bir nedenden ötürü düşünebiliyor musunuz? –

Sen window.innerWidth ve window.innerHeight, örneğin ekranın boyutlarını almak ve buna göre grafiği kurmak için kullanabileceğiniz

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

kaynak

2013-07-13 14:26:35

Cevabınız için teşekkürler Lars! Bu kesinlikle, pencere sayfasına dayalı grafiklerin boyutlandırılması açısından çalışır. Tarayıcı penceresiyle nasıl yeniden boyutlandırırım? – TechyDude

'Onresize' olayını kullanabilirsiniz (bkz. Ör. [Bu soru] (http://stackoverflow.com/questions/641857/javascript-window-resize-event)) ancak kendinizi yeniden çizmeniz gerekir. Bu konuda yardım için –

responsive D3 grafiği

cevap

İlgili konular