이 기사에서는 최근에 제작 한 예제 프로젝트를 통해 D3 라이브러리를 사용하여 완전히 독창적으로 시각화 유형의 시각화 유형을 살펴보고 싶습니다.이 구성 요소는 D3를 만드는 방법을 보여줍니다. 배울 수있는 훌륭한 도서관. - 유연성. D3을 사용하면 모든 종류의 데이터를 가져 와서 브라우저 창의 모양과 직접 연결할 수 있습니다. 이 데이터는 절대적으로 가 될 수 있으며, 완전히 독창적 인 시각화를 만들기 위해 다양한 흥미로운 사용 사례가 가능합니다. 우아함. 업데이트간에 부드러운 전환 가있는 대화식 요소를 쉽게 추가 할 수 있습니다. 도서관은
- 가 아름답게 작성되었으며, 구문의 중단을 얻으면 코드를 깨끗하고 깔끔하게 유지하기가 쉽습니다. .
커뮤니티. D3을 이미 사용하는 환상적인 개발자의 광대 한 생태계가 있으며, 그는 온라인으로 코드를 쉽게 공유합니다. bl.ocks.org 및 blockbuilder.org와 같은 사이트를 사용하여 다른 사람들의 사전 작성된 코드를 신속하게 찾아이 스 니펫을 자신의 프로젝트에 직접 복사 할 수 있습니다. .
키 테이크 아웃
데이터 중심 문서에 상관없는 - .
프로젝트는 기존 코드를 차용하고 적응함으로써 반복적으로 개발되어 D3의 적응력과 코딩에서 커뮤니티의 중요성을 보여주기 전에 동적 및 대화식 향상으로 이동했습니다. 최종 대화식 시각화에는 재생/일시 정지 버튼 및 연도를위한 슬라이더와 같은 기능이 포함되어 D3가 데이터 시각화를 사용하여 유익 할뿐만 아니라 매력적인 방법을 설명합니다.
.
나는 Google의 공개 데이터 탐색기를 사용하여 소득 불평등을 탐색하기 시작했습니다.…
가 거의 일정하게 유지되었지만, 직원 당 생산성은 급등했습니다. 실제로
얇은 슬라이스
를 얻는 경우에도 여전히더 나은
. 그러나 우리가 볼 수 있듯이, 파이가 더 커지는 것은및 가 사람들이 전반적으로 덜 얻는 것이 가능합니다. . 이 데이터를 시각화하기위한 첫 번째 아이디어는 다음과 같습니다.
가 더 큰 를 얻을 수 있다는이 메시지를 집에 망치고 싶었습니다. 그것의 더 작은 가 발생할 수 있습니다. 이제 내 생각을 가지고 있었으므로 이제 D3로 구축 할 시간이었습니다.
차용 코드
<that> 그래서, 이제 내가 무엇을 만들겠습니까? 이제이 프로젝트의 실제 고기에 들어가서 <em>를 작성해야합니다.
<that> 당신은 처음 몇 줄의 코드를 처음부터 작성하는 것으로 시작한다고 생각할 수도 있지만 잘못 될 것입니다. 이것은 D3이며 D3과 함께 일하기 때문에 항상 커뮤니티에서 사전 작성된 코드를 찾을 수 있습니다.
<completely> 우리는 완전히 새로운 것을 만들고 있지만 일반 파이 차트와 공통점이 많기 때문에 bl.ocks.org를 간단히 살펴 보았고 Mike Bostock 의이 클래식 구현으로 가기로 결정했습니다. D3의 제작자 중 하나. 이 파일은 이미 수천 번 복사되었을 것입니다. 글을 쓴 사람은 JavaScript를 가진 실제 마법사이므로 이미 멋진 코드 블록으로 시작하고 있는지 확인할 수 있습니다. </completely></that></em>.
이 파일은 D3 V3로 작성되었으며, 버전 5가 지난 달에 마침내 출시되었으므로 현재 두 가지 버전입니다. D3 v4의 큰 변화는 라이브러리가 평평한 네임 스페이스를 사용하여 전환하여 d3.scale.ordinal ()과 같은 스케일 기능이 대신 d3.scaleordinal ()처럼 쓰여진다는 것입니다. 버전 5에서 가장 큰 변화는 데이터 로딩 기능이 이제 약속으로 구성되어 여러 데이터 세트를 한 번에 쉽게 처리 할 수 있다는 것입니다.
혼란을 피하기 위해 이미 BlockBuilder.org에서 저장 한이 코드의 업데이트 된 v5 버전을 만드는 데 어려움을 겪었습니다. 또한 ES5 익명 함수를 화살표 함수로 전환하는 것과 같은 ES6 컨벤션에 맞게 구문을 변환했습니다.
<we> 우리가 이미 시작한 내용은 다음과 같습니다
<em> </em>
그런 다음이 파일을 작업 디렉토리에 복사하여 내 컴퓨터의 모든 것을 복제 할 수 있는지 확인했습니다. 이 튜토리얼을 직접 따르고 싶다면 Github Repo 에서이 프로젝트를 복제 할 수 있습니다. 파일 Starter.html에서 코드로 시작할 수 있습니다. 이 코드를 실행하려면 서버 (예 :이 코드와 같은)가 필요합니다. 후드 아래에서 데이터를 검색하기 위해 Fetch API에 의존하는 것처럼.
<you>이 코드가 어떻게 작동하는지에 대한 간단한 요약을 알려 드리겠습니다. </you></we></that>
우리 코드를 걷는다
<we> 먼저 파일 상단에 몇 가지 상수를 선언하고 있으며, 이는 파이 차트의 크기를 정의하는 데 사용할 것입니다.
<h2>
<code> 이것은 코드를 더 크거나 작게 만들고 싶다면 여기에서 이러한 값을 바로 변경하는 것에 대해 걱정하면됩니다.
.다음으로 SVG 캔버스를 화면에 추가하고 있습니다. SVG에 대해 잘 모른다면 캔버스를 페이지의 공간으로 생각할 수 있습니다. 이 영역 밖에서 SVG를 그려 보려고한다면 화면에 단순히 나타나지 않습니다.
<span>const width = 540; </span><span>const height = 540; </span><span>const radius = Math.min(width, height) / 2; </span>
를 뱉어 내면.
그런 다음 아크를 그리는 데 사용할 수있는 경로 생성기를 정의해야합니다. Path Generator를 사용하면 웹 브라우저에서 Path SVG를 그릴 수 있습니다. D3이 실제로하는 모든 일은 화면의 모양과 데이터를 연결하는 것이지만이 경우 단순한 원이나 사각형보다 더 복잡한 모양을 정의하려고합니다. Path SVGS는 선을 그려야 할 경로를 정의하여 작동하며, D 속성으로 정의 할 수 있습니다.
.
<span>const svg = d3.select("#chart-area")
</span> <span>.append("svg")
</span> <span>.attr("width", width)
</span> <span>.attr("height", height)
</span> <span>.append("g")
</span> <span>.attr("transform", <span>`translate(<span>${width / 2}</span>, <span>${height / 2}</span>)`</span>);
</span><span>const width = 540; </span><span>const height = 540; </span><span>const radius = Math.min(width, height) / 2; </span>
.
<span>const svg = d3.select("#chart-area")
</span> <span>.append("svg")
</span> <span>.attr("width", width)
</span> <span>.attr("height", height)
</span> <span>.append("g")
</span> <span>.attr("transform", <span>`translate(<span>${width / 2}</span>, <span>${height / 2}</span>)`</span>);
</span>
<span>const color = d3.scaleOrdinal(["#66c2a5", "#fc8d62", "#8da0cb","#e78ac3", "#a6d854", "#ffd92f"]); </span>
를 포함합니다. 다음으로, 우리는 데이터 배열에 여전히 존재하는 화면의 모든 SVG를 업데이트하고 있습니다. 우리는 여기에 D3 라이브러리의 환상적인 기능인 전환을 추가하고 있습니다.
<span>const width = 540; </span><span>const height = 540; </span><span>const radius = Math.min(width, height) / 2; </span>
.
. 마지막으로, update () 함수는 이전 데이터 배열에 있지 않은 새로운 요소를 추가해야합니다.
이 코드 블록은이 업데이트 기능이 처음 실행되는 각 아크의 초기 위치를 설정합니다. Enter () 메소드는 화면에 추가 해야하는 데이터의 모든 요소를 제공 한 다음 각 요소를 Att () 메소드로 고리하여 각 각각의 충전 및 위치를 설정할 수 있습니다. 아크. 우리는 또한 각 아크에 흰색 테두리를주고 있으며, 이는 차트가 약간 깔끔해 보입니다. 마지막으로, 우리는이 각 호의 데이터를 데이터의 항목의 초기 값으로 설정하는데, 이는 Arctween () 함수에서 사용하는 데이터의 초기 값으로 설정하고 있습니다.
<you> D3에서 상당히 발전된 주제이므로 이것이 어떻게 작동하는지 정확히 따를 수 없다고 걱정하지 마십시오. 이 도서관의 가장 큰 장점은 강력한 내용을 만들기 위해 모든 내부 작업을 알 필요가 없다는 것입니다. 변경해야 할 비트를 이해할 수있는 한 완전히 필수적이지 않은 세부 사항을 추상화하는 것은 좋습니다.
<us> 그 과정의 다음 단계로 우리를 데려옵니다… <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><span>const svg = d3.select("#chart-area")
</span> <span>.append("svg")
</span> <span>.attr("width", width)
</span> <span>.attr("height", height)
</span> <span>.append("g")
</span> <span>.attr("transform", <span>`translate(<span>${width / 2}</span>, <span>${height / 2}</span>)`</span>);
</span></pre><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div>
<code code> 코드 적응
<have> 이제 우리는 지역 환경에 코드가 있었고 그것이 무엇을하고 있는지 이해하기 때문에 우리가보고있는 데이터를 전환하여 관심있는 데이터와 함께 작동하도록합니다. . <data> 프로젝트의 데이터/ 폴더에서 작업 할 데이터를 포함 시켰습니다. 이 새로운 incomes.csv 파일은 이번에는 CSV 형식이므로 (Microsoft Excel을 사용하여 열 수있는 파일의 종류) D3.JSON 대신 D3.CSV () 함수를 사용하겠습니다. ) 함수 : <p>
</p>
이 기능은 기본적으로 d3.json ()과 동일합니다. 데이터를 사용할 수있는 형식으로 변환합니다. 또한 유형 () 이니셜 라이저 기능을 두 번째 인수로 제거하고 있습니다. 왜냐하면 그것은 우리의 기존 데이터에만 해당 되었기 때문입니다. <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><span>const width = 540;
</span><span>const height = 540;
</span><span>const radius = Math.min(width, height) / 2;
</span></pre><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div>.
<a> d3.csv 콜백의 상단에 console.log (data) 명령문을 추가하면 다음과 같이 작업중인 데이터의 모양을 볼 수 있습니다.
<p>
<arr> 우리는 50 개의 항목 배열이 있으며, 각 항목은 데이터에서 1 년을 나타냅니다. 매년, 우리는 5 개의 소득 그룹 각각에 대한 데이터와 다른 몇 가지 분야의 데이터와 함께 객체를 가지고 있습니다. 이 몇 년 동안 파이 차트를 만들 수 있지만 먼저 데이터 주위를 약간 섞어 올바른 형식이되도록해야합니다. D3와 함께 데이터 조인을 작성하려면 각 항목이 SVG에 연결되는 배열로 전달해야합니다.
<in> 마지막 예에서는 화면에 표시하고 싶은 모든 파이 슬라이스에 대한 항목이있는 배열이 있음을 기억하십시오. 이것을 현재 우리가 가지고있는 것과 비교하십시오. 이것은 우리가 그릴 각 파이 슬라이스를 나타내는 1 ~ 5의 키를 가진 객체입니다. </in></arr></p>.
이 문제를 해결하려면 이전에 가지고 있던 type () 함수를 대체하기 위해 readata ()라는 새 함수를 추가하여 데이터의 모든 항목을로드 할 때 반복 할 것입니다.
<p>
매년이 함수는 값 배열이있는 객체를 반환하고 데이터 조인에 전달됩니다. 우리는 이러한 각 값을 이름 필드로 라벨링하고 있으며 이미 가지고있는 소득 가치에 따라 수치 가치를 제공하고 있습니다. 우리는 또한 비교를 위해 매년 평균 소득을 추적하고 있습니다. </p>
이 시점에서 우리는 다음과 같이 작업 할 수있는 형식의 데이터를 가지고 있습니다.
<div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><span>const svg = d3.select("#chart-area")
</span> <span>.append("svg")
</span> <span>.attr("width", width)
</span> <span>.attr("height", height)
</span> <span>.append("g")
</span> <span>.attr("transform", <span>`translate(<span>${width / 2}</span>, <span>${height / 2}</span>)`</span>);
</span></pre><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div>
<off> 데이터에서 첫 해에 차트를 생성하여 시작하겠습니다. 그런 다음 나머지 몇 년 동안 업데이트 할까 걱정됩니다. <p>.
현재, 우리의 데이터는 2015 년에 시작하여 1967 년에 종료되므로 다른 일을하기 전에이 배열을 반전시켜야합니다.
</p>
<normal> 일반 파이 차트와 달리 그래프의 경우 각 아크 각도를 고정하고 시각화 업데이트로 반경을 변경하려고합니다. 이렇게하려면 파이 레이아웃에서 값 () 메소드를 변경하여 각 파이 슬라이스가 항상 동일한 각도를 얻도록합니다.<div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><span>const width = 540;
</span><span>const height = 540;
</span><span>const radius = Math.min(width, height) / 2;
</span></pre><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div>
<ll> 다음은 시각화가 업데이트 될 때마다 반경을 업데이트해야합니다. 이를 위해서는 사용할 수있는 규모를 제시해야합니다. 스케일은 D3의 함수로서 두 값 사이에서 를 가져 오는 기능입니다. 범위로. 우리가 사용할 규모는 다음과 같습니다
<em>
<this> 우리는 데이터에 액세스 하자마자이 척도를 추가하고 있으며, 우리의 입력은 지난해 가장 부유 한 그룹의 수입 인 데이터 세트에서 0에서 가장 큰 데이터 세트 사이에 있어야한다고 말하고 있습니다. 우리의 데이터에서 (데이터 [49] .Values [4] .Value). 도메인의 경우 출력 값이.
<an> 이것은 0의 입력이 우리에게 픽셀 값을 제공해야하며, 데이터에서 가장 큰 값의 입력은 우리에게 너비 또는 높이의 절반의 값을 제공해야한다는 것을 의미합니다. >
우리는 여기에서 </an></this></em> 제곱 루트 스케일 <em>를 사용하고 있음을 알 수 있습니다. 우리 가이 작업을 수행하는 이유는 파이 슬라이스의 영역이 반경이 아닌 각 그룹의 소득에 비례하기를 원하기 때문입니다. area = πr </em> 2 이므로이를 설명하기 위해 제곱근 스케일을 사용해야합니다.
<use> 그런 다음이 척도를 사용하여 update () 함수 내에서 아크 생성기의 외부 값을 업데이트 할 수 있습니다.
</use></ll></normal></off></a></data></have>
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
