<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>가로�� 막대그�프</title>
<style>
#myGraph rect {
stroke: rgb(160, 0, 0);
stroke-width: 1px;
fill: rgb(255, 0, 0);
}
.axis text {
font-family: sans-serif;
font-size: 11px;
}
.axis path, .axis line {
fill: none;
stroke: black;
}
</style>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
</head>
<body>
<h1>가로�� 막대그�프</h1>
<svg id="myGraph"></svg>
<script type="text/javascript" src="./js/p82.js"></script>
</body>
</html>// CSV 파일을 불러와 그�프 그리기
d3.csv("./js/mydata.csv", function(error, data){
var dataSet = [ ]; // 데이터를 저장할 배열 준비
for(var i=0; i<data.length; i++){ // 데이터 줄 �만큼 �복
dataSet.push(data[i].item1); // item1 레이블� 데이터만 추출
}
// 데이터를 이용�여 그�프 그리기
d3.select("#myGraph") // SVG 요소 지정
.selectAll("rect") // SVG에서 사각��을 �타낼 요소를 지정
.data(dataSet) // 데이터 설정
.enter() // 데이터 개�에 떄라 Rect 요소 생성
.append("rect") // SVG 사각�� 생성
.attr("x", 10) // 가로�� 막대그�프이므로 X 좌표를 10으로 조정
.attr("y", function(d,i){ // Y 좌표를 배열 순서에 따라 계산
return i * 25; // 막대그�프� Y 좌표를 25px 단위로 계산
})
.attr("height", "20px") // 막대그�프� 높이를 20px로 지정
.attr("width", function(d, i){ // 막대그�프� 넓이를 배열� 내용에 따라 계산
return d +"px"; // 데이터� 값을 그대로 넓이로 함
})
// 눈금을 표시�고자 선�� 스케일을 설정
var xScale = d3.scale.linear() // 선�� 스케일 설정
.domain([0, 300]) // 원� 데이터 범위
.range([0, 300]) // 실제 출력 크기
// 눈금을 설정�고 표시
d3.select("#myGraph")
.append("g") // 그룹화함
.attr("class", "axis") // 스타일시트 클�스 설정
.attr("transform", "translate(10, "+((1+dataSet.length) * 20+5)+")") // 표시 위� 조정
.call(d3.svg.axis() // call()로 눈금을 표시할 함�를 ��출
.scale(xScale) // 스케일을 적용
.orient("bottom") // 눈금� 표시 위�를 아�쪽으로 지정
)
});