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으로 문의하세요.

관련 기사

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

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

사용자 정의 Google 검색 API 설정 자습서Mar 04, 2025 am 01:06 AM

이 튜토리얼은 사용자 정의 Google 검색 API를 블로그 또는 웹 사이트에 통합하는 방법을 보여 주며 표준 WordPress 테마 검색 기능보다보다 세련된 검색 경험을 제공합니다. 놀랍게도 쉽습니다! 검색을 Y로 제한 할 수 있습니다

예제 색상 JSON 파일Mar 03, 2025 am 12:35 AM

이 기사 시리즈는 2017 년 중반에 최신 정보와 새로운 예제로 다시 작성되었습니다. 이 JSON 예에서는 JSON 형식을 사용하여 파일에 간단한 값을 저장하는 방법을 살펴 봅니다. 키 값 쌍 표기법을 사용하여 모든 종류를 저장할 수 있습니다.

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

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

10 JQuery Syntax HighlighterMar 02, 2025 am 12:32 AM

코드 프레젠테이션 향상 : 개발자를위한 10 개의 구문 하이 라이터 웹 사이트 나 블로그에서 코드 스 니펫을 공유하는 것은 개발자에게 일반적인 관행입니다. 올바른 구문 형광펜을 선택하면 가독성과 시각적 매력을 크게 향상시킬 수 있습니다. 티

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

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

10 JavaScript & JQuery MVC 자습서Mar 02, 2025 am 01:16 AM

이 기사는 JavaScript 및 JQuery Model-View-Controller (MVC) 프레임 워크에 대한 10 개가 넘는 튜토리얼을 선별 한 것으로 새해에 웹 개발 기술을 향상시키는 데 적합합니다. 이 튜토리얼은 Foundatio의 다양한 주제를 다룹니다

' this ' 자바 스크립트로?Mar 04, 2025 am 01:15 AM

핵심 포인트 JavaScript에서는 일반적으로 메소드를 "소유"하는 객체를 말하지만 함수가 호출되는 방식에 따라 다릅니다. 현재 객체가 없으면 글로벌 객체를 나타냅니다. 웹 브라우저에서는 창으로 표시됩니다. 함수를 호출 할 때 이것은 전역 객체를 유지하지만 객체 생성자 또는 그 메소드를 호출 할 때는 객체의 인스턴스를 나타냅니다. call (), apply () 및 bind ()와 같은 메소드를 사용 하여이 컨텍스트를 변경할 수 있습니다. 이 방법은 주어진이 값과 매개 변수를 사용하여 함수를 호출합니다. JavaScript는 훌륭한 프로그래밍 언어입니다. 몇 년 전,이 문장은있었습니다

See all articles