요소 추가를 위해 D3.js에서 `selectAll(null)`을 사용하는 이유는 무엇입니까?

null 선택: D3에서 selectAll(null)을 사용하는 이유는 무엇입니까?

배경

D3에서는 다음과 같은 패턴을 보는 것이 일반적입니다.

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

이 코드는 DOM에 요소를 추가하는데 왜 selectAll(null)이 사용됩니까? 특정 요소에 대해 selectAll("circle") 또는 selectAll("p")이어야 하지 않나요?

Enter Selection

D3.js의 "enter" 선택에 대한 설명:

데이터를 요소에 바인딩하는 경우 세 가지 시나리오가 있습니다.

1. 요소와 데이터 포인트의 수가 동일합니다.
2. 데이터 포인트보다 요소가 많습니다.
3. 요소보다 데이터 포인트가 더 많습니다.

시나리오 #3에서는 해당 요소가 없는 데이터 포인트가 "입력" 선택에 속합니다. "입력" 선택에서 추가를 사용하면 일치하지 않는 데이터에 대한 새 요소가 생성됩니다.

기존 요소에 바인딩

제안된 스니펫 var Circle = svg.selectAll("circle").data(data )는 데이터를 선택하고 기존 서클에 바인딩합니다. 후속 enter() 호출은 일치하는 요소 없이 데이터 포인트를 처리합니다.

selectAll(null) 사용

selectAll("circle") 사용은 원이 없을 때 작동하지만 selectAll(null) 제안을 사용하면 작동합니다. "입력" 선택이 항상 데이터 배열의 요소에 해당한다는 일관된 보장입니다. 이 접근 방식을 사용하면 일치하지 않는 모든 데이터 포인트에 새 요소가 추가됩니다.

결론

아래 예에서는 본문에 단락을 추가하기 위해 selectAll(null)을 사용하는 방법을 보여줍니다.

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

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