d3.js 사용하는데 질문입니다. 모바일 관련입니다.


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>
  • 2016년 07월 15일에 작성됨

조회수 189


1 답변


좋아요
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,
  • 2016년 07월 19일에 작성됨
    리눅스(유닉스) 기반의 시스템에서 웹 서비스를 개발하고 있습니다.

로그인이 필요한 기능입니다.

Hashcode는 개발자들을 위한 무료 QnA사이트 입니다. 작성한 답변에 다른 개발자들이 댓글을 작성하거나 좋아요/싫어요를 할 수 있기 때문에 계정을 필요로 합니다.
► 로그인
► 계정만들기
Close