블로그 이미지
윤영식
Full Stacker, Application Architecter, KnowHow Dispenser and Bike Rider

Publication

Category

Recent Post

2013. 8. 6. 19:19 Data Visualization/D3.js

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를 넘어가서 글자가 린다 


* 좀 더 심화학습을 하고 싶다면? 참조

posted by 윤영식