[D3.js] Color 함수
D3.js/D3.js2019. 11. 21. 21:00
[D3.js] Color 함수
- 참고 : D3.js API - https://github.com/zziuni/d3/wiki/API-Reference
Color 관련 scale 함수들을 다룰까 고민하다가 그냥 D3.js API에 나와 있는 함수들을 간단히 실험 해보겠습니다.
1. rgb(r,g,b) 함수
- D3코딩 : d3.rgb(r,g,b);
Red, Green, Blue 값으로 RGB Color를 생성합니다. 우리가 잘 아는 기본 rgb()함수로 그냥 사용하시면 됩니다.
예) 캔버스 영역의 배경색 지정
<script src="https://d3js.org/d3.v5.min.js"></script>
<body>
<script>
var rgb = d3.rgb(255,0,0);
var svg = d3.select("body").append("svg")
.attr("width",100)
.attr("height",100)
.style("background-color",rgb);
</script>
</body>
[결과]
2. hsl(h,s,l) 함수
- D3코딩 : d3.hsl(h,s,l);
색조(hue) , 채도(saturation), 명도(lightness) 값으로 HSL Color를 생성합니다.
예) 캔버스 영역의 배경을 색 지정
<script src="https://d3js.org/d3.v5.min.js"></script>
<body>
<script>
var hsl = d3.hsl(150,50,50);
var svg = d3.select("body").append("svg")
.attr("width",100)
.attr("height",100)
.style("background-color",hsl);
</script>
</body>
[결과]
Color 문자열을 파싱해서 RGB Color 생성
<script src="https://d3js.org/d3.v5.min.js"></script>
<body>
<script>
var rgb = d3.rgb(255,0,0);
var hsl = d3.hsl(d3.rgb(0,255,0));
var svg = d3.select("body").append("svg")
.attr("width",100)
.attr("height",100)
.style("background-color",hsl);
</script>
</body>
[결과]
3. hcl(h, c, l) 함수
- D3코딩 : d3.hcl(h, c, l);
예) 캔버스 영역의 배경을 색 지정
<script src="https://d3js.org/d3.v5.min.js"></script>
<body>
<script>
var hsl = d3.hsl(150,50,50);
var svg = d3.select("body").append("svg")
.attr("width",100)
.attr("height",100)
.style("background-color",hsl);
</script>
</body>
[결과]
추가로, 위 hsl(color)에서와 마찬가지로 hcl(color)로 표현 할 수 있다.
var rgb = d3.rgb(255,0,0);
var hcl = d3.hcl(d3.rgb(0,255,0));
마무리
rgb()함수 하나만 하더라도 그와 관련 된 여러 함수들이 있는데 다음 D3.js 사이트에 가셔서 Color 편을 보시면 과련 함수들이 많기 때문에 다 거론 할 수 없고 직접 가셔서 각 함수들을 인자 값을 대입하여 확인하시기 바랍니다.
- D3.js API - https://github.com/zziuni/d3/wiki/API-Reference
'D3.js > D3.js' 카테고리의 다른 글
| [D3.js] 축(Axis) 함수 (0) | 2020.01.06 |
|---|---|
| [D3.js] Color Scale 함수 (0) | 2019.11.22 |
| [D3.js] 추가 Scale 함수 (0) | 2019.11.20 |
| [D3.js] scaleLinear 함수 (0) | 2019.11.19 |
| [D3.js] 데이터 배열 다룰 때 유용함 함수 (0) | 2019.11.18 |
댓글()
