jquery 또는 css로 g태그 circle 여러개 조정하는 방법이 있을까요?

조회수 988회

아래 그림처럼 d3로 버블 차트를 그렸습니다. 그런데 화면 width값이 764px이하로 줄어들 게 되면 버블의 개수와 원의 r(반지름값), 각 g태크(원)의 거리값을 조정할 수 있게끔 만들어야합니다.

jquery나 css로 조정하는 방법이 있을까요? 이미지

![이미지

1 답변

  • 말씀하시는 건 아마도 일정 너비 이하의 화면에서는 특정 버블들이 아예 안 보여야 하는 상황일 겁니다. 하지만 그건 특정 버블들에 display: none; 준다고 해서 해결될 이슈 같지는 않고 말이지요. (아닌가? 한번 알아보셔요.)

    저라면 window.resize 이벤트가 발생할 때마다 어떤 함수를 콜하겠습니다. 그 함수가 하는 일은:

    1. 현재 화면 너비를 확보한다.
    2. 그 화면 너비에서는 몇 개의 버블이 어떤 크기로 나와야 좋은지 결정한다.
    3. 1에서 결정된 대로 새로 버블차트를 그린다.

    그리고 이 함수를 처음 윈도가 로딩됐을 때 한번 콜해줍니다. 이런 접근법이라면 확실히 동작하겠지요. 시도해 보세요! 프로그래밍에 정답은 없으니까요.

    이미지

    + 버블차트 전체를 responsive하게 하는 방법이라면 그건 그냥 viewbox로 한번 감싸주면 된다고 합니다. 이걸 물으신게 아니겠지만...

답변을 하려면 로그인이 필요합니다.

프로그래머스 커뮤니티는 개발자들을 위한 Q&A 서비스입니다. 로그인해야 답변을 작성하실 수 있습니다.

(ಠ_ಠ)
(ಠ‿ಠ)