[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] Color 함수 | Ecency