d3.js 사용하는데 질문입니다. 모바일 관련입니다.
조회수 2565회
D3.js를 이용해서 시각화 작업을 하고 있습니다.
mobile에서도 보여지도록 viewport 사용해서 만들고있는데 viewport가 먹질 않습니다.
어떻게 하면 좋을까요?
html코드를 통째로 올려드립니다. html로 파일 저장하시고 로드하시면 바로 페이지가 나타납니다. 고수님들 부탁드립니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, target-densitydpi=medium-dpi" />
<meta name="HandheldFriendly" content="true" >
<meta name="MobileOptimized" content="720" >
<link rel="stylesheet" href="//code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="//code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script src="//d3js.org/d3.v3.min.js"></script>
<title>Streamgraph</title>
</head>
<body>
<div class="someclass">
<h2>Create A Bar Chart With D3 JavaScript</h2>
<div id="bar-chart" class="ui-mobile-viewport ui-overlay-a">
<script type="text/javascript">
var chartdata = [10, 20, 30, 40, 50, 60, 70, 80, 90, 100, 110, 120,
135, 150, 165, 180, 200, 220, 240, 270, 300, 330, 370, 410];
var margin = {top: 30, right: 10, bottom: 30, left: 50}
var height = 400 - margin.top - margin.bottom,
width = 720 - margin.left - margin.right,
barWidth = 40,
barOffset = 20;
var dynamicColor;
var yScale = d3.scale.linear()
.domain([0, d3.max(chartdata)])
.range([0, height])
var xScale = d3.scale.ordinal()
.domain(d3.range(0, chartdata.length))
.rangeBands([0, width])
var colors = d3.scale.linear()
.domain([0, chartdata.length * .33, chartdata.length * .66, chartdata.length])
.range(['#d6e9c6', '#bce8f1', '#faebcc', '#ebccd1'])
var awesome = d3.select('#bar-chart').append('svg')
.attr('width', width + margin.left + margin.right)
.attr('height', height + margin.top + margin.bottom)
.style('background', '#bce8f1')
.append('g')
.attr('transform', 'translate(' + margin.left + ', ' + margin.top + ')')
.selectAll('rect').data(chartdata)
.enter().append('rect')
.style({
'fill': function (data, i) {
return colors(i);
}, 'stroke': '#31708f', 'stroke-width': '5'
})
.attr('width', xScale.rangeBand())
.attr('x', function (data, i) {
return xScale(i);
})
.attr('height', 0)
.attr('y', height)
.on('mouseover', function (data) {
dynamicColor = this.style.fill;
d3.select(this)
.style('fill', '#3c763d')
})
.on('mouseout', function (data) {
d3.select(this)
.style('fill', dynamicColor)
})
awesome.transition()
.attr('height', function (data) {
return yScale(data);
})
.attr('y', function (data) {
return height - yScale(data);
})
.delay(function (data, i) {
return i * 20;
})
.duration(2000)
.ease('elastic')
var verticalGuideScale = d3.scale.linear()
.domain([0, d3.max(chartdata)])
.range([height, 0])
var vAxis = d3.svg.axis()
.scale(verticalGuideScale)
.orient('left')
.ticks(10)
var verticalGuide = d3.select('svg').append('g')
vAxis(verticalGuide)
verticalGuide.attr('transform', 'translate(' + margin.left + ', ' + margin.top + ')')
verticalGuide.selectAll('path')
.style({fill: 'none', stroke: "#3c763d"})
verticalGuide.selectAll('line')
.style({stroke: "#3c763d"})
var hAxis = d3.svg.axis()
.scale(xScale)
.orient('bottom')
.ticks(chartdata.size)
var horizontalGuide = d3.select('svg').append('g')
hAxis(horizontalGuide)
horizontalGuide.attr('transform', 'translate(' + margin.left + ', ' + (height + margin.top) + ')')
horizontalGuide.selectAll('path')
.style({fill: 'none', stroke: "#3c763d"})
horizontalGuide.selectAll('line')
.style({stroke: "#3c763d"});
</script>
</div>
</div>
</body>
</html>
-
(•́ ✖ •̀)
알 수 없는 사용자
1 답변
-
위의 코드를 보면 D3 차트 생성시 다음과 같은 부분이 있습니다.
var height = 400 - margin.top - margin.bottom, width = 720 - margin.left - margin.right,위의 코드를 해석하면 높이 400에 너비 720에 해당하는 크기로 화면에 렌더링 하도록 되어 있습니다.
위의 코드가 의도한것이라면, 정상적인 출력으로 보입니다.
만약 너비를 장치의 크기에 맞추는 것이라면 다음과 같이 바꿔서 해보세요
var height = 400 - margin.top - margin.bottom, width = $("body").width() - margin.left - margin.right,위는 body 태그의 너비(위 HTML로는 장치의 너비와 같습이다.)를 활용하도록 한 것입니다.
만약 너비가 720보다 크게 하기 싫다면 다음과 같은 식으로 응용하면 될 것 같네요.
var maxWidth = $("body").width() if( maxWidth > 720 ) { maxWidth = 720; } var height = 400 - margin.top - margin.bottom, width = maxWidth - margin.left - margin.right,
댓글 입력