jquery 또는 css로 g태그 circle 여러개 조정하는 방법이 있을까요?
조회수 988회
아래 그림처럼 d3로 버블 차트를 그렸습니다. 그런데 화면 width값이 764px이하로 줄어들 게 되면 버블의 개수와 원의 r(반지름값), 각 g태크(원)의 거리값을 조정할 수 있게끔 만들어야합니다.
jquery나 css로 조정하는 방법이 있을까요?
![
1 답변
-
말씀하시는 건 아마도 일정 너비 이하의 화면에서는 특정 버블들이 아예 안 보여야 하는 상황일 겁니다. 하지만 그건 특정 버블들에
display: none;
준다고 해서 해결될 이슈 같지는 않고 말이지요. (아닌가? 한번 알아보셔요.)저라면
window.resize
이벤트가 발생할 때마다 어떤 함수를 콜하겠습니다. 그 함수가 하는 일은:- 현재 화면 너비를 확보한다.
- 그 화면 너비에서는 몇 개의 버블이 어떤 크기로 나와야 좋은지 결정한다.
- 1에서 결정된 대로 새로 버블차트를 그린다.
그리고 이 함수를 처음 윈도가 로딩됐을 때 한번 콜해줍니다. 이런 접근법이라면 확실히 동작하겠지요. 시도해 보세요! 프로그래밍에 정답은 없으니까요.
+ 버블차트 전체를 responsive하게 하는 방법이라면 그건 그냥 viewbox로 한번 감싸주면 된다고 합니다. 이걸 물으신게 아니겠지만...
댓글 입력