d3 + react 유용한 함수

getTextWidth

text의 width를 반환하는 함수이다. d3로 차트를 조작할 때 텍스트의 너비보다 텍스트를 포함하는 요소의 너비가 작을경우의 예외처리를 할 수 있다.

export default function getTextWidth(text, fontSize, fontFace) {
  var canvas = document.createElement("canvas");
  var canvasContext = canvas.getContext("2d");
  canvasContext.font = fontSize + "px " + fontFace;
  return canvasContext.measureText(text).width;
}

isBright

16진수 색상코드를 받아서 밝은 색상인지 어두운 색상인지를 반환하는 함수이다.

배경색에 따른 글자 색상 처리를 해줄 때에 유용하게 사용할 수 있다.

export default function isBright(rgbCode) {
  let c = rgbCode.substring(1);
  let rgb = parseInt(c, 16);
  let r = (rgb >> 16) & 0xff;
  let g = (rgb >> 8) & 0xff;
  let b = (rgb >> 0) & 0xff;

  let luma = 0.2126 * r + 0.7152 * g + 0.0722 * b;

  return luma > 127 ? true : false;
  // true일경우 밝음, 아닐 경우 어두움
}