반응형
1.line
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<script src='https://d3js.org/d3.v4.min.js'></script>
<title>Document</title>
</head>
<body>
<script>
width = 500;
height = 500;
svg = d3.select('body')
.append('svg')
.attr('width', width) // width 크기를 500으로 지정
.attr('height', height) // height 크기를 500으로 지정
svg.append('line')
.attr('x1',100) //x의 시작점
.attr('x2',500) //x의 종료점
.attr('y1',50) //y의 시작점
.attr('y2',50) //y의 종료점
.attr('stroke','black') //색깔
</script>
</body>
</html>
2.circle
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<script src='https://d3js.org/d3.v4.min.js'></script>
<title>Document</title>
</head>
<body>
<script>
width = 500;
height = 500;
svg = d3.select('body')
.append('svg')
.attr('width', width)
.attr('height', height)
svg.append('circle')
.attr('cx',250) //x 지점
.attr('cy',50) //y 지점
.attr('r',50) //원 크기
</script>
</body>
</html>
3.eclipse
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<script src='https://d3js.org/d3.v4.min.js'></script>
<title>Document</title>
</head>
<body>
<script>
width = 500;
height = 500;
svg = d3.select('body')
.append('svg')
.attr('width', width)
.attr('height', height)
svg.append('ellipse')
.attr('cx',250) // x 시작점
.attr('cy',50) // y 시작점
.attr('rx',150) // x축의 원의 길이
.attr('ry',50) // y축으로 원의 길이
</script>
</body>
</html>
4. 복합
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<script src='https://d3js.org/d3.v4.min.js'></script>
<title>Document</title>
</head>
<body>
<script>
width = 500;
height = 500;
svg = d3.select('body')
.append('svg')
.attr('width', width)
.attr('height', height)
g = svg.append('g')
.attr('transform',function(d,i){
return 'translate(0,0)'
})
elipse = g.append('ellipse')
.attr('cx',250)
.attr('cy',50)
.attr('rx',150)
.attr('ry',50)
.append('text')
g.append('text')
.attr('x', 150)
.attr('y', 50)
.attr('stroke', 'white')
.text('문자열 각인!!')
</script>
</body>
</html>
반응형
'Base > WEB' 카테고리의 다른 글
| [WEB] google chart 그리기 (0) | 2020.09.14 |
|---|---|
| [WEB] D3.js 데이터 읽어오는 방법(csv,Json) - 4 (0) | 2020.09.14 |
| [WEB] D3.js Event, Aninmation 사용법 - 3 (0) | 2020.09.14 |
| [WEB] D3.js 에서 Data 사용법 - 2 (0) | 2020.09.14 |
| [WEB] D3.js 기본 개념 및 사용법 - 1 (0) | 2020.09.14 |
