D3.js 의 Text 출력 방법 및 Axis 컴포넌트에 대해 실습해 본다
1. SVG Text Element
- 글자는 font, position, writing direction, attribute(rendering)을 정해야 함
- 정의 (참조)
<text x="20" y="20" font-family="sans-serif" font-size="20px" fill="red">Hello!</text>
- 차트에 Text Label을 붙여보자
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="d3.min.js"></script>
</head>
<body>
<svg width="200" height="200">
<g>
<circle cx="20" cy="20" r="20" fill="red" />
<circle cx="70" cy="70" r="20" fill="purple" />
</g>
<text x="20" y="20" font-family="sans-serif" font-size="20px" fill="green">YoungSik!</text>
</svg>
</body>
</html>
글자가 나옴
- 다르게 표현
//Circle Data Set
var circleData = [
{ "cx": 20, "cy": 20, "radius": 20, "color" : "green" },
{ "cx": 70, "cy": 70, "radius": 20, "color" : "purple" }];
//Create the SVG Viewport
var svgContainer = d3.select("body").append("svg")
.attr("width",200)
.attr("height",200);
//Add circles to the svgContainer : virutal element 만들기
var circles = svgContainer.selectAll("circle")
.data(circleData)
.enter()
.append("circle");
//Add the circle attributes : data binding to element
var circleAttributes = circles
.attr("cx", function (d) { return d.cx; })
.attr("cy", function (d) { return d.cy; })
.attr("r", function (d) { return d.radius; })
.style("fill", function (d) { return d.color; });
//Add the SVG Text Element to the svgContainer : virtual element 만들기
var text = svgContainer.selectAll("text")
.data(circleData)
.enter()
.append("text");
//Add SVG Text Element Attributes 텍스트 : data binding to element
var textLabels = text
.attr("x", function(d) { return d.cx; })
.attr("y", function(d) { return d.cy; })
.text( function (d) { return "( " + d.cx + ", " + d.cy +" )"; })
.attr("font-family", "sans-serif")
.attr("font-size", "20px")
.attr("fill", "red");
좌표값이 찍혀 나온다
2. D3.js Axis Component
- Axis component는 horizontal-axis 와 vertical-axis를 쉽게 추가하도록 하는 것임
- x-axis, y-axis
- 축 생성
var xAxis = d3.svg.axis();
- axis는 scale과 관련이 있다 : xAxis는 function 값이 출력된다
var axisScale = d3.scale.linear()
.domain([0,100])
.range([0,100]);
var xAxis = d3.svg.axis()
.scale(axisScale);
typeof(xAxis);
// function
- axis가 function이므로 call 하는 것이다
//Create the SVG Viewport
var svgContainer = d3.select("body").append("svg")
.attr("width", 400)
.attr("height", 100);
//Create the Scale we will use for the Axis
var axisScale = d3.scale.linear()
.domain([0, 100])
.range([0, 400]);
//Create the Axis
var xAxis = d3.svg.axis()
.scale(axisScale);
//Create an SVG group Element for the Axis elements and call the xAxis function
var xAxisGroup = svgContainer.append("g")
.call(xAxis);
group tag와 그안으로 line과 text element가 포함되었다 (참조)
+ axis element는 group 안에서 생성된다
+ 주어진 scale과 range를 기준으로 오른쪽으로 tick mark 스페이스가 생긴다
+ 각 SVG element의 Axis Function은 SVG Transformation을 갖는다
+ 각 SVG element의 Axis Function은 line 과 text로 구성된다
+ 마지막은 SVG Path가 SVG Viewport를 넘어가서 글자가 린다
* 좀 더 심화학습을 하고 싶다면? 참조
'Data Visualization > D3.js' 카테고리의 다른 글
| [D3.js] Bar Chart 만들기 (0) | 2015.08.20 |
|---|---|
| [D3.js] 배우는 방법 (1) | 2013.08.06 |
| [D3.js] DashingD3js.com 실습 - 2 (0) | 2013.08.05 |
| [D3.js] DashingD3js.com 실습 - 1 (0) | 2013.08.05 |
| [Charts] Javascript Chart & Visualization Frameworks, UI Builder (0) | 2013.08.02 |