티스토리 뷰

728x90
반응형

D3.js  - step2


x, y축 생성하기


 1. body에 아래처럼 축을 생성시킬 컨테이너를 만들어 둔다. 

<div id="controls" ></div>

2. 축 생성

맨 하단에 아래와 같이 코드 입력.

<script>
var posData=[
{x:10, y:10},
{x:230, y:230},
{x:120, y:519},
{x:1120, y:30},
{x:220, y:120},
{x:10, y:2240}
];

var graphW=500;
var graphH=500;
var margin={top:20, right:20, bottom:20, left:50};
//id=controls 로 설정된 엘리먼트에 svg요소 추가하고 width/height 설정.
var svgGraphic= d3.select("#controls").append("svg")
.attr({width: graphW, height: graphH});

//데이터로 부터 최대값 설정.
var xMax=d3.max( posData, function(d) {
return d.x;
});
var yMax=d3.max( posData, function(d) {
return d.y;
});
//x,y축 범위 설정.
var xScale=d3.scale.linear()
.domain([0, xMax])
.range([0, graphW-margin.left-margin.right]);
var yScale = d3.scale.linear()
.domain([0, yMax])
.range([graphH-margin.bottom-margin.top, 0 ]);
//d3.svg.axis()를 이용해 x,y축 설정.
//scale()은 축의 범위 설정.
//orient()는 배치설정.
//ticks는 눈금 갯수 설정.
var xAxis=d3.svg.axis()
.scale(xScale)
.orient("bottom")
.ticks(5);
var yAxis=d3.svg.axis()
.scale(yScale)
.orient("left")
.ticks(10);
/*

x,y축 위치 설정. g요소는 어떠한 모양과 꾸밈을 가지지 않고

group으로써 랩핑 역활만 한다.
transform을 통해 상세 위치를 설정하고 call함수를

통해 축을 실질적으로 화면에 보이게 한다.

*/
var gx=svgGraphic.append("g")
.attr("class", "x-axis")
.attr('transform', 'translate('+margin.left+','+(graphH-margin.bottom-margin.top)+')')
.call(xAxis);
var gy = svgGraphic.append("g")
.attr("class", "y-axis")
.attr('transform', 'translate('+ margin.left+',0)')
.call(yAxis);
//x, y 축 스타일링
// 선을 얇게 설정하고 색상도 회색톤으로 맞춘다. 폰트 크기 11px 로 설정 )
svgGraphic.selectAll("path.domain")
.style({
"fill": "none", //축이 되는 path요소에 면적 색상을 채우지 않고 라인만 보이게끔 설정.
"stroke": "#dedede", //축 라인 색상 설정.
"shape-rendering":"crispEdges" //축 길이를 얇게 설정
});
svgGraphic.selectAll("line")
.style({
"stroke":"#dedede", //눈금색 설정.
"shape-rendering":"crispEdges"//눈금선을 얇게 설정
});
svgGraphic.selectAll("text")
.attr("fill", "#999999")//눈금 텍스트 색상 설정.
.style("font-size", "11px"); //눈금 텍스트 크기 설정.

</script>



실행 화면



728x90
반응형

'Programming language > D3js' 카테고리의 다른 글

D3 - Word Cloud type  (0) 2016.11.09
D3js step1 기본  (0) 2016.08.03
댓글