반응형
반응 형 D3 차트
이 D3 차트가 있습니다. 반응 형으로 만들고 너비 및 높이 변수, innerRadius 및 outerRadius에 백분율을 사용하는 방법이 있습니까? 반응 형 사이트에서 작업 중이며 화면 크기 / 브라우저 크기에 따라 변경해야합니다.
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>
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이 메서드 에는 처리기가 필요하지 않습니다 .
당신은 사용 window.innerWidth하고 window.innerHeight, 예를 화면의 크기를 얻을하고 그에 따라 그래프를 설정
var width = window.innerWidth,
height = window.innerHeight,
innerRadius = Math.min(width,height)/3,
outerRadius = innerRadius + 30;
ReferenceURL : https://stackoverflow.com/questions/17626555/responsive-d3-chart
반응형
'programing tip' 카테고리의 다른 글
| 프로그래밍 방식으로 애플리케이션 지원 폴더 경로 가져 오기 (0) | 2020.12.29 |
|---|---|
| find a pattern in files and rename them (0) | 2020.12.29 |
| Windows 8의 Grunt : 'grunt'가 인식되지 않음 (0) | 2020.12.29 |
| 부트 스트랩 모달에서 텍스트 영역 너비를 100 %로 설정 (0) | 2020.12.29 |
| Xcode 7에서 ENABLE_BITCODE를 사용하는 방법은 무엇입니까? (0) | 2020.12.29 |