D3.js_javascript 스킬의 data(), enter() 및 exit() 문제에 대한 자세한 설명-JS 튜토리얼-php.cn

집

웹 프론트엔드

JS 튜토리얼

D3.js_javascript 스킬의 data(), enter() 및 exit() 문제에 대한 자세한 설명

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:44 PM

D3는 널리 사용되며 이제 주류 데이터 시각화 도구 중 하나가 되었습니다. 모두가 d3.js를 처음 접했을 때 가장 어려웠던 부분은 data(), enter(), exit() 작업이었습니다.

오랫동안 연락을 주고받으며 어느 정도 이해를 얻은 후, 제가 이해한 바를 간략하게 말씀드리고 싶습니다.

데이터()

먼저 예를 살펴보겠습니다.

<body>
 <p></p>
 <p></p>
 <p></p>
</body>

로그인 후 복사

실행 코드:

d3.select("body").selectAll("p").data([1, 2, 3])

로그인 후 복사

여기서 data()는 선택한 DOM 요소에 데이터를 바인딩하는 데 사용됩니다. 이러한 방식으로 요소 너비 설정 등과 같은 데이터에 대한 일부 관련 작업을 수행할 수 있습니다.

표면적으로는 아무런 변화도 보이지 않습니다. 그러나 내부적으로는 document.getElementsByTagName("p")[0].__data__를 통해 볼 수 있는 해당 DOM 요소에 __data__ 속성을 추가합니다.

입력() 및 종료()

이 두 가지 작업은 이름만으로는 무엇을 하는지 유추하기 어렵기 때문에 혼란스럽습니다.

위의 data() 예에서는 DOM 요소 수와 데이터 수가 동일합니다. 하지만 다르다면 어떻게 해야 할까요?

이 상황을 처리하기 위해 Enter() 및 Exit()가 사용됩니다.

입력()

DOM의 수가 데이터의 수보다 적거나 전혀 없는 경우 일반적으로 프로그램이 DOM을 생성하도록 돕습니다.

다음 예에서는 DOM 요소를 미리 제공하지 않습니다.

<body>
</body>

로그인 후 복사

아직 실행 중:

d3.select("body").selectAll("p").data([1, 2, 3])

로그인 후 복사

위 예와의 차이점은 위 예에서는 .style("width", "100px")과 같은 작업을 계속 수행할 수 있다는 것입니다. 하지만 여기서는 DOM 요소를 선택하지 않았고 DOM 요소를 먼저 생성해야 하기 때문에 그렇게 할 수 없습니다.

enter()는 데이터 바인딩 후 DOM 요소 중 누락된 부분을 선택하는 데 사용됩니다. 누락된 부품인데 어떻게 선택해야 할지 궁금할 수 있습니다. 여기서 우리는 약간의 상상력을 발휘하여 우리가 존재하지 않는 것을 선택했다고 상상해 볼 필요가 있습니다. 우리는 이를 "가상 DOM" 또는 "자리표시자"라고 부를 수 있습니다.

enter()는 선택만 할 뿐 실제로 필요한 DOM 요소를 추가하지는 않습니다. 따라서 실제로 DOM 요소를 생성하기 위해서는 enter() 이후에 add()를 사용하는 것이 일반적입니다.

이제부터 d3.select("body").selectAll("p").data([1, 2, 3]).enter().append("p")를 사용하여 자동으로 생성합니다. 필수 DOM 요소.

Enter 처리 방법

요소가 충분하지 않은 경우 일반적인 접근 방식은 추가()를 사용하여 요소를 추가하는 것입니다. 아래 코드를 살펴보세요.

<body> 
  <p></p> 
  <script> 
  var dataset = [3, 6, 9]; 
  var p = d3.select("body").selectAll("p"); 
//绑定数据后，分别获取update和enter部分 
  var update = p.data(dataset); 
  var enter = update.enter();   
//update部分的处理方法是直接修改内容 
  update.text( function(d){ return d; } ); 
//enter部分的处理方法是添加元素后再修改内容 
  enter.append("p") 
   .text(function(d){ return d; }); 
  </script> 
 </body>

로그인 후 복사

이 예에서는 본문에 p 요소가 1개만 있지만 데이터가 3개이므로 입력 부분에 추가 데이터 2개가 포함됩니다. 중복된 데이터를 처리하는 방법은 이에 해당하는 추가 요소입니다. 처리 후 본문에는 세 개의 p 요소가 있으며 그 내용은 다음과 같습니다.

<p>3</p> 
<p>6</p> 
<p>9</p>

로그인 후 복사

일반적으로 서버에서 파일을 읽은 후 데이터는 있지만 웹페이지에는 요소가 없습니다. 이는 D3의 매우 중요한 기능입니다. 즉, 빈 세트를 선택한 다음 enter().append()를 사용하여 요소를 삽입할 수 있습니다. 이제 본문에 p 요소가 없다고 가정하고 다음 코드를 참조하세요.

var dataset = [10,20,30,40,50]; 
var body = d3.select("body"); 
body.selectAll("p") //选择body中所有p，但由于没有p，所以选择了一个空集 
 .data(dataset)  //绑定dataset数组 
 .enter()   //返回enter部分 
 .append("p")  //添加p元素 
 .text(function(d){ return d; });

로그인 후 복사

위 코드에서 selectAll은 빈 세트를 선택한 다음 데이터를 바인딩합니다. 선택 세트가 비어 있으므로 data()가 반환하는 업데이트 부분도 비어 있습니다. 그런 다음 Enter() 및 Append()를 호출하여 각 데이터에 해당하는 요소 p가 있도록 합니다. 마지막으로 p 요소의 내용을 변경합니다. 즉, Enter 부분을 처리하는 일반적인 방법은 요소를 추가하기 위해 Append()를 사용하는 것입니다.

exit()

enter()와 반대로, exit()는 데이터에 비해 추가되는 DOM 요소를 선택하는 데 사용됩니다.

다음 예에서는 DOM 요소를 하나 더 제공합니다.

<body>
 <p></p>
 <p></p>
 <p></p>
 <p></p>
</body>

로그인 후 복사

이번에는 추가이기 때문에 이해하기 쉽습니다. 그렇다면 실제로 존재하는 것, 즉 마지막

입니다.

더 많은 요소가 있는 경우 .remove()를 사용하여 이러한 요소를 제거할 수 있습니다.

d3.select("body").selectAll("p").data([1, 2, 3]).exit().remove();

로그인 후 복사

탈퇴 처리 방법

요소가 너무 많고 해당 요소에 해당하는 데이터가 없습니다. 이러한 요소의 경우 일반적인 접근 방식은 제거()를 사용하여 요소를 삭제하는 것입니다. 본문에 5개의 p 요소가 있다고 가정하면 다음 코드를 참조하세요.

var dataset = [10, 20, 30]; 
 var p = d3.select("body").selectAll("p"); 
//绑定数据之后，分别获取update部分和exit部分 
 var update = p.data(dataset); 
 var exit = update.exit(); 
//update的部分的处理方法是修改内容 
 update.text( function(d){ return d; } ); 
//exit部分的处理方法是删除 
 exit.remove();

로그인 후 복사

이 코드에서는 종료 부분을 삭제 처리했습니다. 삭제 후에는 웹 페이지에 중복된 p 요소가 없습니다.

참고자료

"조인을 통한 사고" - Mike Bostock

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

뜨거운 도구

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

뜨거운 주제

Gmail 이메일의 로그인 입구는 어디에 있나요?

7369

자바 튜토리얼

1628

Cakephp 튜토리얼

1355

라라벨 튜토리얼

1266

PHP 튜토리얼

1215

Related knowledge

JavaScript로 문자열 문자를 교체하십시오 Mar 11, 2025 am 12:07 AM

JavaScript 문자열 교체 방법 및 FAQ에 대한 자세한 설명 이 기사는 JavaScript에서 문자열 문자를 대체하는 두 가지 방법 인 내부 JavaScript 코드와 웹 페이지의 내부 HTML을 탐색합니다. JavaScript 코드 내부의 문자열을 교체하십시오 가장 직접적인 방법은 대체 () 메소드를 사용하는 것입니다. str = str.replace ( "find", "replace"); 이 메소드는 첫 번째 일치 만 대체합니다. 모든 경기를 교체하려면 정규 표현식을 사용하고 전역 플래그 g를 추가하십시오. str = str.replace (/fi

8 멋진 jQuery 페이지 레이아웃 플러그인 Mar 06, 2025 am 12:48 AM

손쉬운 웹 페이지 레이아웃에 대한 jQuery 활용 : 8 에센셜 플러그인 jQuery는 웹 페이지 레이아웃을 크게 단순화합니다. 이 기사는 프로세스를 간소화하는 8 개의 강력한 JQuery 플러그인을 강조합니다. 특히 수동 웹 사이트 생성에 유용합니다.

자신의 Ajax 웹 응용 프로그램을 구축하십시오 Mar 09, 2025 am 12:11 AM

그래서 여기 당신은 Ajax라는이 일에 대해 배울 준비가되어 있습니다. 그러나 정확히 무엇입니까? Ajax라는 용어는 역동적이고 대화식 웹 컨텐츠를 만드는 데 사용되는 느슨한 기술 그룹을 나타냅니다. 원래 Jesse J에 의해 만들어진 Ajax라는 용어

모바일 개발을위한 10 개의 모바일 치트 시트 Mar 05, 2025 am 12:43 AM

이 게시물은 Android, BlackBerry 및 iPhone 앱 개발을위한 유용한 치트 시트, 참조 안내서, 빠른 레시피 및 코드 스 니펫을 컴파일합니다. 개발자가 없어서는 안됩니다! 터치 제스처 참조 안내서 (PDF) Desig를위한 귀중한 자원

소스 뷰어와의 jQuery 지식을 향상시킵니다 Mar 05, 2025 am 12:54 AM

JQuery는 훌륭한 JavaScript 프레임 워크입니다. 그러나 어떤 도서관과 마찬가지로, 때로는 진행 상황을 발견하기 위해 후드 아래로 들어가야합니다. 아마도 버그를 추적하거나 jQuery가 특정 UI를 달성하는 방법에 대해 궁금한 점이 있기 때문일 것입니다.

내 자신의 JavaScript 라이브러리를 어떻게 작성하고 게시합니까? Mar 18, 2025 pm 03:12 PM

기사는 JavaScript 라이브러리 작성, 게시 및 유지 관리, 계획, 개발, 테스트, 문서 및 홍보 전략에 중점을 둡니다.

10 JQuery Fun 및 Games 플러그인 Mar 08, 2025 am 12:42 AM

10 재미있는 jQuery 게임 플러그인 웹 사이트를보다 매력적으로 만들고 사용자 끈적함을 향상시킵니다! Flash는 여전히 캐주얼 웹 게임을 개발하기위한 최고의 소프트웨어이지만 JQuery는 놀라운 효과를 만들 수 있으며 Pure Action Flash 게임과 비교할 수는 없지만 경우에 따라 브라우저에서 예기치 않은 재미를 가질 수 있습니다. jQuery tic 발가락 게임 게임 프로그래밍의 "Hello World"에는 이제 jQuery 버전이 있습니다. 소스 코드 jQuery Crazy Word Composition 게임 이것은 반은 반은 게임이며, 단어의 맥락을 알지 못해 이상한 결과를 얻을 수 있습니다. 소스 코드 jQuery 광산 청소 게임