D3은 데이터 운영을 기반으로하는 Visual JS 라이브러리입니다. D3을 이해하기 위해로드 가능한 데이터의 가장 기본적인 표시로 시작합니다.
나는 HTML의 기본 프레임 워크에 대해 많이 말하지 않을 것입니다. 먼저 코드를 넣은 다음 설명하겠습니다.
이 디렉토리에서 새로운 테스트 디렉토리를 만들고 두 개의 폴더 데모와 D3을 만듭니다. Demo는 작성할 HTML 파일을 저장하고 D3은 D3.v3.js를 저장합니다.
데모 폴더 아래에서 새 Indexp.html을 만들고 다음 코드를 복사 한 다음 두 번 클릭하여 브라우저에서 효과를 열어줍니다.
<! docType html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> d3 : data </title> <script type = "text/javaScript"src = "../ d3/d3.v3.js"> </head> </head> </head> </javaScript type = "text/javaScript"> var dataSet = [5, 10, 15, 20, 25]; d3.select ( "body"). selectall ( "p") .data (dataset) .enter () .append ( "p") .text (function (d) {return "i can count" + d;}) .Style ( "color", function (d) {if (d> 15) {retl "; </script> </body> </html>이 간단한 데모에서 구현 한 기능은 다음과 같습니다. 본문에 P 태그를 추가하고 P 태그에서 D3에 의해로드 된 텍스트 내용을 추가하고 기능 설정 조건에 따라 텍스트 색상을 조정하십시오.
위의 웹 페이지 코드와 본문의 JS 코드는 페이지에 표시되는 데이터 작업입니다. 향후 많은 예를 들어,이 부분을 수정하면 다른 부분이 페이지 프레임 워크로 간주 될 수 있습니다.
이전의 기사는 일반적으로 D3 결합을 사용하여 동일한 개체의 단계별 데이터 작업을 쉽게 유지 관리하기 위해 연결합니다.
d3.select ( "body") Body 요소를 선택하고 다음 방법으로 연결합니다.
.selectall ( "P") 모든 단락을 선택하십시오
.Data (데이터 세트) 로딩 어레이 데이터를 구문 분석합니다. 배열의 길이는 5입니다. 연결된 각 방법은 향후 5 번 실행됩니다. 배열 첨자에 따라 배열 요소에서 메소드 작업을 순서대로 수행합니다.
.enter ()는 새로운 결합 데이터에 대한 자리 표시 자 요소를 만듭니다 (일시적으로 알려지지 않은 5 개의 태그 생성과 동일).
생성 된 숫자의 수는 선택한 기존 태그 수와로드 된 데이터 배열의 길이에 따라 결정해야합니다.
이 예에서와 같이, 신체에 5 개의 p 태그가 있으면, 그것은 그것이 생성 될 것이다 (이제 신체의 p는 0이므로 5는 생성됨).
생성되지 않은 것보다 더 많은 경우, 마지막 자리 표시 자 요소의 총 수와 P 요소는 5 여야합니다.
.Append ( "P") 자리 표시 자 요소를 P 요소로 변경하십시오
.Text (function (d) {}) 각 단락의 디스플레이 내용을 제어하기 위해 익명 함수를 작성하여 일반적으로 문자열을 반환합니다. 이 방법에서는 어쨌든 쓸 수 있습니다.
이 예제는 각 단락에 해당 배열 요소 값을 계산할 수 있습니다.
함수 형식이 수정되었습니다. 이러한 방식으로 만 데이터를 함수에로드 할 수 있습니다.
.Style ( "Color", "")은 CSS의 텍스트 색상 속성을 설정합니다. 텍스트와 마찬가지로 세트 문자열을 기능으로 수행하여 원하는 작업을 수행 할 수 있습니다. 이 예에서, 단락의 해당 수신 값이 15보다 크면, 선이 빨간색으로 변합니다.
마지막으로, 우리가 보는 효과는 그림과 같습니다.
이 기사는이 기사로 끝납니다. 다음은 SVG에서 원을 그리는 방법과 원을 연결하는 간단한 힘 다이어그램을 연결하는 방법입니다.