forEach와 eachD3js 의 차이점은 무엇입니까 ?
답변:
첫째, .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()). 하지만 다음과 같은 이유로 그렇게해서는 안됩니다.
그렇게하면 원하는 동작이 생성되지 않습니다. .forEach()원하는 동작을 생성하기 위해 d3 선택과 함께 사용하는 방법을 아는 것은 d3의 내부 작동에 대한 깊은 이해가 필요합니다. 문서화 된 API의 공개 부분 만 사용할 수 있다면 왜 그렇게해야합니다.
.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가 유용합니다.
this은 예를 들어를 포함하여 고차 함수를 전달하는 많은 d3 시나리오에서 문제가됩니다 selection.style("color", function(d,i) { /* here 'this' is a DOM element */ }). 이것이 부분적으로 d3 클래스 (예 d3.svg.axis를 들어)가 prototype클래스를 정의 하는 방법을 사용하지 않는 이유라고 생각합니다 this. 하지만 selection[0].forEach(...)이 문제를 어떻게 피할 수 있는지 모르겠습니다 . 같은 문제 아닙니까?
.forEach범위 지정을 위해 두 번째 매개 변수를 수락 했는지 몰랐습니다 this. 그것은 당신이 .each()자바 스크립트를 사용하여 d3와 동일한 효과를 얻기 위해 비슷한 것을 사용할 수 있다는 것을 깨달았습니다..bind() 방법 . 예를 들어 다음은 범위 this를 지정 window하고 console.log합니다 selection.each(function() { console.log(this); }.bind(window))..