x축과 눈금을 그리기 위해서 알아야할 D3 메서드는 scaleLinear(), axisBottom() 입니다.
scaleLinear()는 숫자로 표현된 선형으로 된 눈금을 생성합니다.
.domain() 과 .range()로 출력 범위를 정해줍니다.
var xScale = d3.scaleLinear()
.domain([0,500])
.range([0,500])현재 가로막대그래프가 500이하의 값들로 이뤄져있기에 .domain([0,500])으로 0~500 사이의 값을 데이터의 범위로 설정합니다.
range()는 domain을 표시하는 눈금의 범위입니다.
그리고 range([0,500])으로 1:1로 대응하게 출력합니다.
axisBottom()은 그래프 아래에 축을 넣을 때 사용하는 메서드입니다.
축을 위로 올리려면 axisTop()
왼쪽은 axisLeft()
오른쪽 axisRight()를 사용해주면 됩니다.
.call(d3.axisBottom(xScale))작성한 x축과 눈금을 화면에 표시하려면 기존의 SVG에 "g" 요소를 통해서 추가해줘야 합니다.
스타일 시트에서 g 요소의 x축과 눈금의 스타일을 지정하기 위해 attr("class","axis")로 클래스를 지정해줍니다.
눈금들 사이의 거리는 transform 속성으로 조절합니다.
translate(x,y)는 x방향으로 x만큼, y방향으로 y만큼 이동하라는 코드입니다.
d3.select("#myGraph")
.append("g")
.attr("class","axis")
.attr("transform","translate(10,"+((1+dataSet.length)*20+5)+")")
.call(d3.axisBottom(xScale))위의 요소들을 합치면 x축과 눈금을 그릴 수 있습니다.
var xScale = d3.scaleLinear()
.domain([0,500])
.range([0,500])
d3.select("#myGraph")
.append("g")
.attr("class","axis")
.attr("transform","translate(10,"+((1+dataSet.length)*20+5)+")")
.call(d3.axisBottom(xScale))
이전에 만들었던 막대그래프와 합쳐보면
test.html
<!DOCTYPE html>
<html>
<head>
<style>
svg{
width: 500px; height: 150px; border:1px solid black;
}
#myGraph rect{
stroke : rgb(0, 100, 0);
stroke-width: 1px;
fill:rgb(0, 160, 0)
}
.axis text{
font-family: sans-serif;
font-size: 12px;
}
.axis path,.axis line{
fill:none;
stroke: black;
}
</style>
<script src="https://d3js.org/d3.v7.min.js" charset="utf-8"></script>
</head>
<body>
<h1>가로형 막대그래프</h1>
<button id = "update">업데이트</button>
<br>
<svg id="myGraph">
</svg>
<script src="auto.js"></script>
<br/>
</body>
</html>
auto.js
var dataSet = [400,200,90,190,240];
d3.select("#myGraph") //svg 요소 선택
.selectAll("rect")
.data(dataSet)
.enter()
.append("rect")
.attr("x",0)
.attr("y",function(d,i){
return i * 25;
})
.attr("width",function(d,i){
return d + "px";
})
.attr("height","20px")
d3.select("#update")
.on("click",function(){
for(var i = 0; i < dataSet.length;i++){
dataSet[i] = Math.floor(Math.random()*400);
}
d3.select("#myGraph")
.selectAll("rect")
.data(dataSet)
.transition()
.delay(function(d,i){return i*500;})
.duration(2500)
.attr("width",function(d,i){
return d + "px";
})
})
var xScale = d3.scaleLinear()
.domain([0,500])
.range([0,500])
d3.select("#myGraph")
.append("g")
.attr("class","axis")
.attr("transform","translate(10,"+((1+dataSet.length)*20+5)+")")
.call(d3.axisBottom(xScale))<실행결과>
가로형 막대그래프
728x90
'데이터분석 > d3.js' 카테고리의 다른 글
| <D3.js>1. 가로막대 그래프 그리기(3) 애니메이션 효과 추가 (0) | 2022.06.19 |
|---|---|
| <D3.js> 1. 가로막대 그래프 그리기(2)색, 데이터 변경 (0) | 2022.06.16 |
| <d3.js> 가로막대 그래프 그리기 1. 데이터를 그래프로 (0) | 2022.06.09 |
| D3.js로 그래프 그리기 1. 기본 개념 (1) 들어가기 앞서 (0) | 2022.06.04 |