이것은 아마도 d3.js에서 가장 어려운 개념일 것입니다. 그리고 그것은 거의 모든 단일 차트에 사용됩니다. 그것은 실제로 d3의 힘: 요소에 데이터를 바인딩 우리가 지금까지 달성 하 고 어떻게 우리가 어떤 스타일로이 차트를 흔들 수 있습니다 살펴보겠습니다. 이전에 사용했던 것과 동일한 attr 함수를 사용하여 SVG 요소에 클래스 특성을 추가할 수 있습니다. D3.js가 있는 차트를 처음에 만드는 이유는 무엇입니까? 왜 그냥 이미지를 표시하지? 먼저 빈 결과 집합으로 반환되는 차트의 모든 요소를 선택합니다. 그런 다음 데이터 함수는 배열 길이에 따라 DOM을 업데이트해야 하는 요소 수를 알려줍니다. enter는 데이터 입력이 선택 영역보다 긴 경우 누락된 요소를 식별합니다. 그러면 추가해야 하는 요소를 나타내는 새 선택 영역이 반환됩니다. 일반적으로 DOM에 요소를 추가하는 추가가 뒤따릅니다.

음, 차트는 렌더링 시간 동안 동적 시각화를 필요로 타사 리소스에서 오는 정보를 기반으로합니다. 또한, SVG는이 응용 프로그램 케이스에 잘 맞는 매우 강력한 도구입니다. 너비가 1000픽셀이고 높이가 600픽셀인 차트를 만들고 싶습니다. 가로 차트는 방향에 따라 가로 또는 세로가 될 수 있습니다. 나는 일명 일명 열 차트로 갈 것입니다. 하나는 그래픽 디자이너의 지혜를 필요로 할 수 있습니다, UX 연구원 및 기타 강력한 생물. 다음 예제에서는 차트를 높일 수 있는 몇 가지 가능성을 보여 드리겠습니다! 📊 안녕하세요 친구! 📈우리는 방금 #d3js 사용하여 이 👇👇https://t.co/7uvYqWBKuk pic.twitter.com/OofIyelyYV D3 갤러리에 오신 것을 환영합니다와 같은 아름다운 대화형 막대 차트를 만드는 방법을 가르쳐주는 새로운 #javascript 튜토리얼을 발표했습니다! 관찰 가능한 에서 포크에 대한 자세한 예제를 사용할 수 있습니다. D3의 프로필과 시각화 컬렉션을 참조하십시오.

관찰 에 대한 작업을 공유하거나 우리에게 링크를 트윗하십시오! D3.js는 DOM 조작을 위한 놀라운 라이브러리입니다. 그것의 깊이는 발견을 기다리는 수많은 숨겨진 (실제로 는 숨겨져 있지 않고, 정말 잘 문서화되어 있습니다)을 숨깁니다. 이 글에서는 평범하지 않은 막대 차트를 만드는 데 도움이되는 도구 집합의 조각만 다룹니다. 이 기사에서는 지금까지 D3.js로 진행 상황을 제시하고 막대 차트의 간단한 예제를 통해 라이브러리의 기본 사용을 보여 드리고자합니다. D3.js 자체의 기본 응용 프로그램을 가르치는 동안 낮은 복잡성 시각적 요소를 나타내기 때문에 시작하기 위해 막대 차트를 선택했습니다. 이것은 당신을 속이지 말아야, D3는 데이터를 시각화 할 수있는 도구의 훌륭한 세트를 제공합니다. 정말 좋은 사용 사례에 대한 github 페이지를 확인하십시오! 내가 D3에 대해 좋아하는 가장 좋은 것 중 하나는 온라인으로 사용할 수있는 멋진 데모의 말도 안되는 양이며 어젯밤 나는 D3와 데이터 시각화의 1,134 예와 엑셀 시트에 우연히 발견했다.