D3 javascript foreach와 각각의 차이점

Question

D3js에서 forEach과 each의 차이점은 무엇입니까?

Answer 1

먼저 .forEach()은 d3의 일부가 아니며 javascript 배열의 기본 함수입니다. 따라서

["a", "b", "c"].forEach(function(d, i) { console.log(d + " " + i); }); 
// Outputs: 
a 0 
b 1 
c 2 

d3이 페이지에로드되지 않은 경우에도 작동합니다.

다음으로 d3의 .each()은 d3 선택에서 작동합니다 (d3.selectAll(...) 일 때 얻을 수있는 결과). 기술적으로, 을 d3 선택에 호출 할 수 있습니다. 장면 뒤에서 d3 선택이 추가 기능이있는 배열이므로 (그 중 하나는 .each()입니다). 하지만 다음과 같은 이유로 인해서는 안됩니다.

1. 이렇게하면 원하는 동작이 생성되지 않습니다. 원하는 동작을 생성하기 위해 을 d3 선택과 함께 사용하는 방법을 알고 있으면 d3의 내부 동작을 자세히 이해해야합니다. 그렇다면 API의 공개 된 부분만을 사용할 수 있다면 어째서 그렇게해야할까요?

2. 는 당신이 D3 선택에 .each(function(d, i) { })를 호출 할 때, 당신은 단지 d 및 i 이상을 얻을 : 함수는 호출 가도록 어디 d와 관련된 HTML DOM 요소에 그 기능 점수 내부 this 키워드. 다시 말해서 내부의 console.log(this)은 <div class="foo"></div> 또는 그 어떤 html 요소라도 기록 할 것입니다. CSS 속성, 내용 등을 변경하려면이 this 객체에서 함수를 호출 할 수 있기 때문에 유용합니다. 일반적으로 d3을 사용하여 d3.select(this).style('color', '#c33');처럼 이러한 속성을 설정합니다. d, this 및 i :

주요 테이크 아웃은 당신이 필요로하는 3 가지에 액세스 할 수 .each()를 사용한다는 것입니다. .forEach()을 사용하면 처음부터 예제와 같이 배열에 2 가지 (d 및 i) 만 표시되며 HTML 요소를이 두 가지와 연관 시키려면 많은 작업을해야합니다. 그리고 다른 것들 중에서도 d3이 어떻게 유용할까요?