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

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

WBOY

풀어 주다： 2016-05-16 15:44:55

원래의

1106명이 탐색했습니다.

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