| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 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 |
- MYSQL
- swift 화면전환
- CSV
- 나만의 상점
- update / insert
- Kakao API Address
- 보유중스킨
- rounding
- 업비트
- Aspose.cells
- Banker's
- 한번에 업데이트 인서트 하기
- chart.js
- MSSQL
- 초딩수학
- Android
- 일본여행
- .csv
- Oracle
- LEFT JOIN
- MS-SQL
- Request.Form
- league of legends
- Banker's rounding
- python
- merge match
- upbit
- Excel
- 한글깨짐
- 썸머노트
- 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);
});