공부js with Me: 요소를 선택하고 DOM(Post#1)에 추가합니다.

6150 단어 tutorialjavascript
제 D3 초보자 시리즈에 오신 걸 환영합니다.js기초, 너는 나와 함께 D3를 배울 수 있다!이 일련의 블로그 글은 저의 학습을 분류하고 여러분과 지식을 공유할 것입니다.따라서 언제든지 평론에서 당신의 제시와 기교를 토론해 주십시오.

소개


오늘 우리는 D3를 상세하게 소개할 것이다.js는, 왜 그것을 사용할 수 있는지, 어떻게 설정하는지, 그리고 그것을 어떻게 사용하여 DOM과 상호작용하는지에 대한 기초 지식이다.

D3가 뭐야?js？


D3는 데이터 구동을 나타내는 문서입니다.데이터 시각화를 위한 프런트엔드 JavaScript 라이브러리입니다.HTML, CSS 및 SVG를 사용하여 브라우저에서 실행할 수 있는 뛰어난 대화형 데이터 시각화를 만들 수 있습니다.

내가 왜 이걸 써야 돼?


D3는 대부분 CSS와 SVG를 사용하기 위해 구축된 것이기 때문에 D3는 가장 유연한 데이터 시각화 도구가 될 수 있다.인터랙티브나 애니메이션을 마음대로 만들 수 있는 유일한 제한은 창의력이다.
D3의 창립자인 마이클 보스토크(Mike Bostock)는 Github의 이 갤러리에 많은 예가 있다.

시작하기 전에 제가 뭘 알아야 돼요?


D3를 깊이 있게 연구하기 전에 HTML, CSS 및 JavaScript에 대한 기초 지식을 튼튼하게 이해해야 합니다.엄밀히 말하면, jQuery 측의 경험은 필요하지 않지만, 도움이 될 수 있습니다.D3의 구문은 매우 비슷하다.마지막으로 기하학과 기이치 분해에 대한 기본적인 이해는 당신을 틀리게 하지 않을 것이다.이 시리즈에서 저는 SVG 창설에 관한 초급 속성 과정을 배울 것입니다. 따라서 도구 상자에 SVG가 없으면 걱정하지 마십시오.

설정 중


D3를 사용하는 가장 간단한 방법은 CDN을 사용하는 것입니다.
여러 단락이 포함된 HTML 템플릿을 만듭니다.
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>D3 Fundamentals</title>
    <link rel="stylesheet" href="master.css">
    <script src="https://d3js.org/d3.v4.min.js"></script>
  </head>

  <body>
    <p>First Paragraph</p>
    <p>Second Paragraph</p>
    <p>Third Paragraph</p>
    <p>Fourth Paragraph</p>
    <p>Fifth Paragraph</p>

    <script type="text/javascript" src="index.js"></script>
  </body>
</html>
이 스크립트 태그를 머리글에 붙여넣을지 확인합니다.<script src="https://d3js.org/d3.v4.min.js"></script>here에서 로컬 복사본을 다운로드하고 스크립트 원본 속성을 로컬 경로로 가리킬 수도 있습니다.</body>에서 태그를 끝내기 전에 다른 스크립트 태그를 만듭니다.저는 개인적으로 스크립트를 HTML 코드와 분리하는 것을 좋아해서 외부 인덱스에 연결했습니다.js 파일.나는 우리의 코드가 더욱 복잡해지기 때문에 이렇게 할 것을 건의한다.하지만 지금은 원한다면 스크립트 표시에서 JS를 작성할 수 있습니다.

1단계: DOM에서 요소 선택 및 추가 방법 이해


도형, 도표, 지도를 깊이 있게 제작하기 전에 우리는 어떻게 DOM과 상호작용하는지 알아야 한다.이것은 주로 HTML 요소를 선택하고 첨부함으로써 이루어진다.

요소 선택


D3를 사용하면 다음 두 가지 방법으로 요소를 선택할 수 있습니다.d3.select()d3.selectAll()select 방법은 편집할 요소인 매개 변수를 사용합니다.이것은 이름, 클래스 이름, id를 표시하는 형식일 수 있습니다.
우리는 계속해서 우리의 단락에 매우 기본적인 양식을 추가해서 우리가 서로 다른 선택 방법을 사용하는 효과를 볼 수 있도록 한다.만약 네가 이전에 이렇게 하는 스타일을 본 적이 없다면, 너무 걱정하지 마라.잠시 후에 나는 상세하게 토론할 것이다.d3.select('p')을 사용하면 DOM의 첫 번째 단락 요소에만 적용됩니다.참고: 다른 단락의 다른 단락을 선택하려면 D3 선택 방법의 CSS n 번째 선택기를 사용할 수 있습니다.세 번째 세그먼트를 선택하려면 d3.select('p:nth-child(3)')을 실행할 수 있습니다.
물론 원소를 선택하면 아무것도 표시되지 않기 때문에 효과가 있다는 것을 증명하기 위해 스타일을 추가합시다.선택한 요소에 스타일을 추가하기 위해 style() 방법을 사용합니다.이것은 두 개의 매개 변수가 필요합니다. style 속성 (이 예에서color) 과 값 (이 예에서teal) 입니다.D3 지원 방법 링크, 그래서 우리가 해야 할 일은 select() 방법의 같은 줄에서 계속하는 것이다.d3.select('p').style('colour', 'teal')을 실행하면 다음과 같은 결과를 얻을 수 있습니다.

그러나 selectAll() 방법은 우리가 모든 목표 요소를 선택할 수 있도록 한다.
우리의 모든 단락을 파란색으로 하기 위해서, 우리는 d3.selectAll('p').style('color', 'teal')을 실행할 수 있다.

이 두 가지 방법은 당신이 만든 대부분의 그림의 기초를 구성할 수 있습니다.하지만 DOM의 하드 인코딩 요소는 자주 사용하지 않습니다.더 가능성이 있는 것은 우리가 그것들이 반영하는 데이터에 따라 특정한 요소를 선택할 것이다.이러한 요소를 동적으로 생성하려면 먼저 JS 파일에서 DOM에 첨부하는 방법을 알아야 합니다.

추가 요소


DOM에 요소를 추가하면 데이터 세트를 기반으로 요소를 동적으로 만들 수 있습니다.우리가 사용할 함수는 다음과 같습니다.d3.append()우리의 단락을 잠시 없애자. 이렇게 하면 우리는 또 빈 HTML 템플릿을 만들 수 있다.우선, 우리는 내용을 추가할 요소를 선택해야 한다. 이 예에서 HTML body일 뿐이다.
이번에는 우리가 명세서를 하나 열거합시다.

d3.select("body")
  .append('ul');
또한 ul 요소를 하나의 변수에 저장하여 몇 개의 li 요소를 추가할 때 더욱 쉽게 할 수 있습니다.우리의 코드가 더욱 복잡해질 때, 이것은 정결을 유지하는 데 도움이 될 것이다.
const ul = d3.select('ul');

ul.append('li')
ul.append('li')
ul.append('li')
이 점에서 너는 반드시 세 가지 요점을 보아야 한다.그러나 그것들은 아무런 텍스트도 없다. - 일부를 추가하기 위해서 우리는 text() 방법을 사용할 수 있다. 이것은 우리가 자주 사용하는 또 다른 편리한 함수이다.요소의 기존 텍스트를 업데이트하는 데도 사용할 수 있습니다.
ul.append('li').text('first');
ul.append('li').text('second');
ul.append('li').text('third');
최종 결과는 이 지루해 보이는 목록일 것이다.

속성 추가


D3에서 가장 널리 사용되는 방법 중 하나는 HTML 태그 속성을 추가하는 attribute 방법입니다.ul.attr()속성 방법은 두 가지 매개 변수를 사용합니다. 추가할 속성(예를 들어 클래스, id, 너비, 높이 등)과 값입니다.
SVG를 사용하기 시작하고 시각화를 위해 x와 y 속성을 지정해야 할 때 특히 유용합니다.그것도 스타일링에 잘 어울려요.예를 들어, 우리는 ul.attr('class', 'list')을 실행하여 "list"라는 클래스를 무질서한 목록에 추가할 수 있습니다.그런 다음 별도의 CSS 파일에서 특정 스타일을 지정하거나 d3.select('.list')을 사용하여 JS 파일에서 추가 편집을 선택할 수 있습니다.

요점을 요약하여 다시 말하다.


비록 우리의 최종 결과는 매우 지루할 수 있지만, 우리는 이미 D3를 배우는 몇 가지 관건적인 첫 번째 단계를 포함하고 있다.
  • 은 D3가 무엇인지, 그리고 왜 그것을 사용해야 하는지.
  • 은 새 프로젝트에 D3를 설정합니다.
  • 에서 select() 및 selectAll()을 사용하여 DOM 요소를 선택하는 방법
  • 에서 append()을 사용하여 DOM에 요소를 첨부하는 방법
  • 은 attr()을 사용하여 요소에 HTML 속성을 추가하는 방법입니다.
  • 은 변수에 저장하도록 선택됩니다.
  • 은 text() 방법으로 요소에 텍스트를 추가합니다.
    • 다음에는 DOM 요소에 데이터를 연결하는 방법에 대해 논의하겠습니다.이것이야말로 진정으로 사람을 흥분시키는 곳이다. 왜냐하면 그것은 동적 데이터를 불러오는 것을 의미하기 때문이다.😱
    창조와 조형이 다른 요소를 마음껏 가지고 놀다.
    async 예
    [초보자용/기본] HTML에 대한 레이블 및 레이블

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage