D3.js에서 `selectAll(null)`을 사용하는 이유는 무엇입니까?

null 선택: D3.js의 selectAll(null) 뒤에 숨겨진 논리

D3.js에서는 다음과 같은 코드가 발생할 수 있습니다. DOM 요소를 추가하는 경우:

var circles = svg.selectAll(null)
    .data(data)
    .enter()
    .append("circle");

"circle", "p" 또는 ".foo"와 같은 특정 요소를 선택하는 것이 일반적이지만 "null"을 선택하는 것은 혼란스러워 보일 수 있습니다. 그러나 이 기술을 사용하면 "입력" 선택이 항상 데이터 배열과 일치하며 각 데이터 포인트에 대해 하나의 요소가 포함됩니다.

"입력" 선택

"입력" 선택은 해당 DOM 요소가 없는 데이터 요소로 구성됩니다. D3.js를 사용하면 기존 DOM 요소에 데이터를 바인딩할 수 있습니다. 그러나 DOM 요소보다 데이터 포인트가 더 많은 경우 초과된 데이터 포인트는 "입력" 선택에 속합니다. 이 선택 항목에 "추가" 기능을 사용하면 새로운 DOM 요소가 생성되어 데이터가 해당 요소에 바인딩됩니다.

기존 요소에 데이터 바인딩

일반적으로 다음 요소를 선택합니다. 바인딩은 다음과 같습니다.

var circles = svg.selectAll("circle")
    .data(data);

circles.enter()
.append("circle");

이 접근 방식은 기존 원 요소에 대한 "업데이트" 선택을 생성하는 반면, "입력" 선택은 해당 요소 없이 데이터 포인트를 처리합니다.

그러나, selectAll(null)은 기존 요소의 유무에 관계없이 전체 데이터 배열을 나타내는 선택 항목을 반환합니다. 이렇게 하면 DOM 상태에 관계없이 "입력" 선택에 항상 전체 데이터 세트가 포함됩니다.

예

이 개념을 설명하려면 다음을 따르세요. 다음 예를 고려해 보세요.

var body = d3.select("body");
var data = ["red", "blue", "green"];
var p = body.selectAll("p")
  .data(data)
  .enter()
  .append("p")
  .text(d=> "I am a " + d + " paragraph!")
  .style("color", String);

처음에 selectAll(null)은 "입력" 선택에 모든 데이터 포인트가 포함되도록 하고 그에 따라 단락이 생성되도록 합니다.

요약하자면, selectAll(null)은 "입력" 선택을 보장하기 위한 일관된 메커니즘을 제공합니다. " 선택은 항상 데이터 배열과 정렬되므로 DOM 상태에 관계없이 데이터 바인딩이 간단해집니다.

위 내용은 D3.js에서 `selectAll(null)`을 사용하는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!