꽤 깔끔한, 응? 또한 이 예제에 불투명도 예제를 추가하고 막대의 너비를 늘렸습니다. D3 예제에서는 D3에 대한 많은 개념을 학습해야 합니다. 후자는 뷰 라이브러리에 대해 이미 가지고 있는 지식만 사용하면 됩니다. 뷰 라이브러리를 아는 사람은 누구나 코드 베이스로 이동하여 수정을 시작할 수 있어야하므로 D3 예제보다 유지 관리가 더 쉽다고 주장할 것입니다. D3 갤러리에 오신 것을 환영합니다! 관찰 가능한 에서 포크에 대한 자세한 예제를 사용할 수 있습니다. D3의 프로필과 시각화 컬렉션을 참조하십시오. 관찰 에 대한 작업을 공유하거나 우리에게 링크를 트윗하십시오! 지난 몇 년 동안 D3와 여러 번 작업했으며 모든 종류의 시각화를 구현했습니다. 나는 D3에 대한 일반적인 개념을 이해하고, 나는 여전히 그것으로 작업하기 위해 투쟁. 후배부터 선임 개발자까지 함께 일했던 모든 사람들도 어려움을 겪고 있습니다. 저를 포함한 많은 사람들이 온라인에서 원하는 것과 거의 일치하는 예제를 찾고 필요에 맞게 예제를 수정한다는 것입니다. 이 자습서에서는 D3.js의 기본 개념 및 기능을 살펴보겠습니다.
막대 차트 렌더링, HTML 및 SVG 요소 렌더링, 변환 및 이벤트 적용 과 같은 몇 가지 예제를 사용하여 사용하는 방법을 알아봅니다. D3를 사용하면 다양한 유형의 차트와 그래프를 만들어 데이터를 효율적으로 나타낼 수 있습니다. 아래 예제에서는 D3를 사용하여 간단한 막대 차트를 만듭니다. 이제 갤러리를 탐색할 준비가 되었습니다. 각 차트 섹션에 대해 시작해야 할 매우 기본적인 예제가 있습니다. 앞에서 예에서 발견한 경우 HTML과 SVG의 조합을 사용했습니다. 어떤 이유로, 사람들은 SVGs를 사용 하 여 전체 차트를 구현 하려고 합니다., 하지만 정말 필요가 없습니다. CSS는 요즘 SVG보다 훨씬 더 강력합니다. 이 장에서 애니메이션 막대 차트를 수행해 보겠습니다. 이 예제에서는 채우기 레코드의 이전 장에서 사용된 data.csv 파일을 데이터 집합으로 사용하고 애니메이션된 막대 차트를 생성합니다. 이 목록에 추가하는 대신 D3 예제의 멋진 조직 모음이 있습니다.
아래 예에서는 SVG 컨테이너에서 D3를 사용하여 사각형을 그려야 합니다. 이 주제에 대해 자세히 읽는 것이 좋습니다. 깊이와 대시 d3.js에서 d3를 확인합니다. 이 기사에서는 지금까지 D3.js로 진행 상황을 제시하고 막대 차트의 간단한 예제를 통해 라이브러리의 기본 사용을 보여 드리고자합니다. 마지막으로 이벤트 처리도 살펴보겠습니다. D3는 또한 수신기를 사용하여 모든 DOM 요소에 바인딩할 수 있는 기본 제공 및 사용자 지정 이벤트를 지원합니다. 아래 예제에서는 클릭 이벤트를 단추에 바인딩하고 이벤트 처리기의 본문에 제목 태그를 추가합니다. 내가 D3에 대해 좋아하는 가장 좋은 것 중 하나는 온라인으로 사용할 수있는 멋진 데모의 말도 안되는 양이며 어젯밤 나는 D3와 데이터 시각화의 1,134 예와 엑셀 시트에 우연히 발견했다. D3로 시작하는 경우 잘 조직 된 API 문서와 정말 훌륭한 자습서 및 치트 시트를 감사하게 될 것입니다.하지만 코드로 데모를 보는 것과 같은 것은 없습니다.
