| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | 5 | ||
| 6 | 7 | 8 | 9 | 10 | 11 | 12 |
| 13 | 14 | 15 | 16 | 17 | 18 | 19 |
| 20 | 21 | 22 | 23 | 24 | 25 | 26 |
| 27 | 28 | 29 | 30 |
- swift 화면전환
- MYSQL
- ASP.NET MVC
- chart.js
- 중학생코딩
- httpclient timeout
- 한글깨짐
- 코딩입문
- Excel
- league of legends
- Aspose.cells
- .csv
- AIoptimization
- 일본여행
- python
- 오블완
- Kakao API Address
- 엔트리
- largelanguagemodels
- 썸머노트
- 블록코딩
- Android
- upbit
- 초딩수학
- MS-SQL
- 중1코딩
- PromptEngineering
- MSSQL
- 아이코딩습관
- cc챔피언
- Today
- Total
DBA
jsbin.com 이용기 샘플 테스트 중 본문
[css]
.chart div {
font: 10px sans-serif;
background-color: steelblue;
text-align: right;
padding: 3px;
margin: 1px;
color: white;
}
.chart rect {
fill: steelblue;
}
.chart text {
fill: white;
font: 10px sans-serif;
text-anchor: end;
}
[html]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.3/d3.min.js"></script>
<title>Bar Chart Test</title>
</head>
<body>
</body>
</html>
[javascript]
$(document).ready(function () {
var data = [4, 8, 15, 16, 23, 42];
var width = 420, barHeight = 20;
var x = d3.scaleLinear().domain([0, d3.max(data)]).range([0, 420]);
console.log(x(8));
var chartContainer = d3.select('body').append('div').attr('class', 'chart');
var chartDraw = chartContainer.selectAll('div')
.data(data).enter().append('div').style('width', function (d) { return x(d) + 'px'; })
.text(function (d) { return d; });
var svgContainer = d3.select('body').append('svg').attr('width', width).attr('height', barHeight * data.length)
.attr('class','chart');
var chartDraw2 = svgContainer.selectAll('g').data(data).enter().append('g')
.attr('transform',function(d, i){ return 'translate(0, ' + i * barHeight + ')';});
console.log('>>> bar1: ', chartDraw2);
chartDraw2.append('rect')
.attr('width', x)
.attr('height', barHeight - 1)
chartDraw2.append('text')
.attr('x', function(d){return x(d) - 10;})
.attr('y', barHeight/2)
.attr('dy', '.35em')
.text(function(d) { return d; });
console.log('>>> bar2: ', chartDraw2);
});