D3의 늪에 빠지다. (D3 개발 Tip)

날짜 : 2017. 11. 30.(목)

D3의 늪에 빠지다. (D3 개발 Tip)

1. 생각하게 된 동기

1. 챠트가 엑셀 혹은 다른 라이브러리 처럼 쉽게 안그려 진다....

2. 알게된 점 (개발 Tip)

많이 사용하고, 실수하고, 개선해 가야 한다.

1. D3 v3과 v4는 다르다.

   • 사용 명칭은 달라지지 않았다. 그런데 사용방법이 바뀌었다.
   • 현재 참고하고 있는 책이 있다면 책의 버젼을 따라서 만드는 것을 추천한다. 손에 익숙해 지면 v4을 사용 하면 된다. (그런데 왜 난 v4를...)
   • 예를 들어.
     1. 비닝작업(분류) : d3.scale.linear() ▶︎ d3.scaleLinear()
     2. 축설정(axis) : d3.svg.axis() ▶ d3.axis[Left,Right,Top,Bottom]()

2. style, attr 작업 (태그 속성작업)

   • style, attr 둘다 문법에 맞다. 하지만 attr로 적용한 것은 CSS에서 덮어 씌우기가 가능하다.
   • 태그 속성작업은 유지보수 및 코드의 간결성을 위하여 CSS파일에서 작업을 하는 것이 좋다.

3. 축을 넣는다면 width, height, padding 을 고려

   • 축을 넣는다면 예쁘게 보여야 한다. 조금씩 틀어지면 보기가 이쁘지 않다.
   • width, height 값만 있는 것이 아니라 기본 padding 값이 들어간다.

참고한 사이트

• Changes in D3 4.0
• whats-the-difference-between-selection-style-and-selection-attr-in-d3-js