const data = 1;
d3.select("body").datam(data).enter().append("div");

const datas = [1, 2, 3];
d3.select("body").datam(datas).enter().append("div");
// 모든 요소에 1,2,3을 할당

const data = 1;
d3.select("body").data([data]).enter().append("div");
// 배열로 제공하였다.

const datas = [1, 2, 3];
d3.select("body").data(datas).enter().append("div");
// 실제 DOM 요소와의 연결이 존재하지 않는 2,3번째 요소에 2,3을 할당하여 enter

const data = [1, 2, 3];
d3.select("body").data(data).enter().append("div");

const data = [1, 2, 3];
d3.select("body").data(data).attr("update");

const data = [1, 2, 3];
d3.select("body").data(data).exit().remove();

const data = [1, 2, 3];
d3.select("body")
  .data(data)
  .join(
    (enter) => enter.append("div"),
    (update) => update.attr("class", "update"),
    (exit) => exit.remove()
  );

const data = [1, 2, 3];
let dom = d3.select("body").selectAll("div").data(data).enter();

dom.append("div").text("hello");

<div>hi</div>
<div>hi</div>
<div>hi</div>
<div>hello</div>
<div>hello</div>

const data = [1, 2, 3];
d3.select("body").selectAll("div").data(data).text("hello");

const overlay = svg
  .selectAll(".overlay")
  .attr("opacity", 0)
  .attr("width", width - marginLeft)
  .attr("height", height - marginBottom)
  .attr("fill", overlayColor)
  .style("pointer-events", "all");

overlay
.on("mouseover", focus.style("display", null))
.on("mouseout", focus.style("display", "none"));
.on("mousemove", function(e){
     const focus = select(".focus");
      const bisectDate = bisector((data) => data.date).left;
      const curPosition = xScale.invert(pointer(e, e.target)[0]);
        // 현재 포인터를 기반으로 xScale 내부에서의 위치정보를 구한다.
      const i = bisectDate(data, curPosition, 1);
        // 현재 마우스 위치를 기반으로 데이터 배열에서 해당 위치의 index를 구한다.
})

var tooltip = d3
  .select("#my_dataviz")
  .append("div")
  .style("position", "absolute")
  .style("visibility", "hidden")
  .text("I'm a circle!");

d3.select("#circleBasicTooltip")
  .on("mouseover", function () {
    return tooltip.style("visibility", "visible");
  })
  .on("mousemove", function (event) {
    return tooltip
      .style("top", event.pageY - 800 + "px")
      .style("left", event.pageX - 800 + "px");
  })
  .on("mouseout", function () {
    return tooltip.style("visibility", "hidden");
  });

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;
}

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일경우 밝음, 아닐 경우 어두움
}

import { useEffect, useState } from "react";
import ResizeObserver from "resize-observer-polyfill";

export const useResizeObserver = (ref) => {
  const [dimensions, setDimensions] = useState(null);
  useEffect(() => {
    const observeTarget = ref.current;
    const resizeObserver = new ResizeObserver((entries) => {
      entries.forEach((entry) => {
        setDimensions(entry.contentRect);
      });
    });
    resizeObserver.observe(observeTarget);
    return () => {
      resizeObserver.unobserve(observeTarget);
    };
  }, [ref]);
  return dimensions;
};

export default useResizeObserver;

import { useEffect, useRef } from "react";

function usePrevValue(value) {
  const prevRef = useRef(null);

  useEffect(() => {
    prevRef.current = value;
  });

  return prevRef.current;
}

export default usePrevValue;

import { useEffect, useState } from "react";

export const useDebounce = (value, delay) => {
  const [debouncedValue, setDebouncedValue] = useState(value);
  useEffect(() => {
    const handler = setTimeout(() => {
      setDebouncedValue(value);
    }, delay);

    return () => {
      clearTimeout(handler);
    };
  }, [value, delay]);
  return debouncedValue;
};

export default useDebounce;

export const chartWrapper = styled.div`
  width: 100%;
  height: 700px;
  padding: 0 32px;
  box-sizing: border-box;
  & > svg {
    display: block;
    margin: auto;
    width: 100%;
  }
`;

import { useEffect, useState } from "react";
import ResizeObserver from "resize-observer-polyfill";
// IE를 지원하기 위한 폴리필

const useResizeObserver = (ref) => {
  const [dimensions, setDimensions] = useState(null);
  //   현재 대상되는 요소의 정보를 state로 관리한다.
  //   사용하는 컴포넌트에서 이 state가 바뀔 경우 리렌더링 하기 위함이다.
  useEffect(() => {
    // useEffect는 DOM 요소가 렌더링 되자마자 실행된다.
    const observeTarget = ref.current;
    // 관찰할 대상을 지정한다.
    const resizeObserver = new ResizeObserver((entries) => {
      entries.forEach((entry) => {
        setDimensions(entry.contentRect);
        // 변화가 생겼을 경우 내부의 콜백이 실행된다.
        // 이 콜백에서 state를 변화시키며 해당 컴포넌트를 리렌더링 한다.
      });
    });
    resizeObserver.observe(observeTarget);
    // 관찰을 시작한다.
    return () => {
      // 컴포넌트가 언마운트 될 경우 관찰을 종료한다.
      resizeObserver.unobserve(observeTarget);
    };
  }, [ref]);
  return dimensions;
};

export default useResizeObserver;