반응 형 D3 차트

나는이 D3 차트를 가지고 있습니다. 응답 성을 높이고 너비 및 높이 변수 인 innerRadius 및 outerRadius에 대한 백분율을 사용하는 방법이 있습니까? 반응 형 사이트에서 작업하고 있으므로 화면 크기/브라우저 크기에 따라 변경해야합니다. 여기반응 형 D3 차트

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

코드 :

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

출처

2013-07-13 TechyDude

[가능한 d3.js 시각화 레이아웃을 만드는 가장 좋은 방법은 무엇입니까?] (http://stackoverflow.com/questions/9400615/whats-the-best-way-to-make-a-d3 -js-visualization-layout-responsive) – user456584

102

당신은 SVG 요소에 viewBox 및 preserveAspectRatio 속성의 조합을 사용하여 차트의 크기 조정을 할 수 있습니다.

전체 예를 들어이 jsfiddle을 참조하십시오 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 + ")");

당신도이 방법과 resize 핸들러를 필요가 없습니다.

출처

2013-10-15 11:15:09

감사합니다. 너무 오랫동안 유휴/유휴 상태 였기 때문에 특히 감사드립니다! – TechyDude

@TechyDude, 문제 없습니다.이 내용이 필요하고 질문을 보았습니다. 나는 다른 곳에서 좋은 답을 찾을 수 없으므로 당신의 본보기를 확장 할 수 있습니다. –

@SamSehnert, 답변 주셔서 감사합니다. https://jsfiddle.net/adityap16/11edxrnq/1/에서 비슷한 것을 수행했습니다. 하지만 제가 이정도로 포팅 할 때 내 플롯이 정말로 작아지고 있습니다. 왜 어떤 이유로 생각할 수 있습니까? –

당신은 window.innerWidth 및 window.innerHeight는, 예를 화면의 크기를 얻을하고 그에 따라 그래프를 설정하는 데 사용할 수있는

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

출처

2013-07-13 14:26:35

답장을 보내 주셔서 감사합니다! 이는 창 페이지를 기반으로 차트의 크기를 결정하는 데있어 효과적입니다. 브라우저 창에서 크기를 조정하려면 어떻게해야합니까? – TechyDude

'onresize' 이벤트를 사용할 수 있습니다 (예 : [이 질문] (http://stackoverflow.com/questions/641857/javascript-window-resize-event) 참조).하지만 자신을 다시 그려야합니다. –

반응 형 D3 차트

답변

관련 문제