[javascript] foreach와 각각의 D3 javascript 차이점

첫째, .forEach()d3의 일부가 아니라 자바 스크립트 배열의 기본 함수입니다. 그래서,

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

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

다음으로, d3 .each()는 d3 선택 (당신이했을 때 얻는 것 d3.selectAll(...))에 대해 작동합니다 . 기술적 .forEach()으로 d3 선택을 호출 할 수 있습니다. 이면에서 d3 선택은 추가 기능이있는 배열입니다 (그 중 하나는 .each()). 하지만 다음과 같은 이유로 그렇게해서는 안됩니다.

1. 그렇게하면 원하는 동작이 생성되지 않습니다. .forEach()원하는 동작을 생성하기 위해 d3 선택과 함께 사용하는 방법을 아는 것은 d3의 내부 작동에 대한 깊은 이해가 필요합니다. 문서화 된 API의 공개 부분 만 사용할 수 있다면 왜 그렇게해야합니다.

2. .each(function(d, i) { })d3 선택 항목 을 호출하면 dand 그 이상을 얻을 수 있습니다 i. 해당 함수 this내부 의 키워드가와 관련된 HTML DOM 요소를 가리 키도록 함수가 호출됩니다 d. 즉 console.log(this), 내부의 html 요소 function(d,i) {}와 유사한 내용을 기록합니다 <div class="foo"></div>. 그리고 그것은 유용합니다. 왜냐하면 thisCSS 속성, 내용 등을 변경하기 위해이 객체 에 대해 함수를 호출 할 수 있기 때문 입니다. 일반적으로에서와 같이 d3를 사용하여 이러한 속성을 설정합니다 d3.select(this).style('color', '#c33');.

주요 테이크 아웃은 사용이이다 .each(): 당신이 3 일에 액세스 할 수 있습니다 당신이 필요로하는 d, this하고 i. 을 사용 .forEach()하면 배열 (처음의 예제와 같이)에서 2 가지 ( d및 i) 만 얻을 수 있으며 HTML 요소를이 2 가지 항목과 연결하기 위해 많은 작업을 수행해야합니다. 그리고 무엇보다도 d3가 유용합니다.