d3 chart 예제

너비가 1000픽셀이고 높이가 600픽셀인 차트를 만들고 싶습니다. 이 기사를 읽은 후, 이 처럼 D3.js 차트를 쉽게 만드는 방법을 배울 거 야: 이 문서는 d3.js에 매우 짧은 소개. 그러나 거의 모든 차트에서 사용되는 기본 개념을 설명합니다. 음, 차트는 렌더링 시간 동안 동적 시각화를 필요로 타사 리소스에서 오는 정보를 기반으로합니다. 또한, SVG는이 응용 프로그램 케이스에 잘 맞는 매우 강력한 도구입니다. 요소에 특성을 추가하는 것은 attr 메서드를 호출하는 것만큼 쉽습니다. 메서드의 첫 번째 매개 변수는 선택한 DOM 요소에 적용할 특성을 사용합니다. 두 번째 매개 변수는 값을 반환하는 값 또는 콜백 함수입니다. 위의 코드는 차트의 시작을 SVG의 (60;60) 위치로 이동합니다. D3.js가 있는 차트를 처음에 만드는 이유는 무엇입니까? 왜 그냥 이미지를 표시하지? 우리는 꽤 유익한 차트를 가지고 있지만 여전히, 너무 대화 형으로 만들 수있는 가능성이있다. 또한 차트에 약간의 추가 패딩을 제공하는 여백 값을 정의합니다. 패딩은 원하는 값으로 변환된 요소로 적용할 수 있습니다. 이제부터는 페이지의 다른 내용과 건강한 거리를 유지하기 위해이 그룹에 그립니다.

D3.js 자체의 기본 응용 프로그램을 가르치는 동안 낮은 복잡성 시각적 요소를 나타내기 때문에 시작하기 위해 막대 차트를 선택했습니다. 이것은 당신을 속이지 말아야, D3는 데이터를 시각화 할 수있는 도구의 훌륭한 세트를 제공합니다. 정말 좋은 사용 사례에 대한 github 페이지를 확인하십시오! 차트의 축으로 계속 해 보겠습니다. y축을 그리려면 이 경우 0과 100인 가장 낮고 가장 높은 값 제한을 설정해야 합니다. 먼저 빈 결과 집합으로 반환되는 차트의 모든 요소를 선택합니다. 그런 다음 데이터 함수는 배열 길이에 따라 DOM을 업데이트해야 하는 요소 수를 알려줍니다. enter는 데이터 입력이 선택 영역보다 긴 경우 누락된 요소를 식별합니다. 그러면 추가해야 하는 요소를 나타내는 새 선택 영역이 반환됩니다. 일반적으로 DOM에 요소를 추가하는 추가가 뒤따릅니다.

이것은 아마도 d3.js에서 가장 어려운 개념일 것입니다. 그리고 그것은 거의 모든 단일 차트에 사용됩니다. 그것은 실제로 d3의 힘 : 요소에 데이터를 바인딩 꽤 깔끔한, 응? 또한 이 예제에 불투명도 예제를 추가하고 막대의 너비를 늘렸습니다. 단점에도 불구하고 SVG는 아이콘, 로고, 일러스트레이션 또는 이 경우 차트를 표시할 수 있는 훌륭한 도구입니다. 다이어그램에는 좋은 기능 집합이 있습니다. 둔하고 정적 인 그림 대신 마우스 호버에서 표현된 값 간의 차이를 보여 줍니다. 제목은 차트를 컨텍스트로 표시하고 레이블은 측정 단위로 축을 식별하는 데 도움이 됩니다. 또한 입력 소스를 표시하기 위해 오른쪽 아래 모서리에 새 레이블을 추가합니다. 이제 갤러리를 탐색할 준비가 되었습니다. 각 차트 섹션에 대해 시작해야 할 매우 기본적인 예제가 있습니다.

D3.js는 DOM 조작을 위한 놀라운 라이브러리입니다. 그것의 깊이는 발견을 기다리는 수많은 숨겨진 (실제로 는 숨겨져 있지 않고, 정말 잘 문서화되어 있습니다)을 숨깁니다. 이 글에서는 평범하지 않은 막대 차트를 만드는 데 도움이되는 도구 집합의 조각만 다룹니다. 이 기사에서는 지금까지 D3.js로 진행 상황을 제시하고 막대 차트의 간단한 예제를 통해 라이브러리의 기본 사용을 보여 드리고자합니다. 또한 몇 가지 텍스트 지침을 추가하여 다이어그램을 보다 포괄적으로 만들고 싶습니다. 차트에 이름을 지정하고 축에 대한 레이블을 추가해 보겠습니다.